CODEWITHSUNDEEP
angularjsbinding
ErEcTuS
ErEcTuS

Reputation: 867

How to bind a part of a variable already binded

I have a loop ng-repeat that displays sevral icons.

 <div class="box">
    <div class="box-body">
        <div class="row" >
            <div class="col-sm-6" style="margin-bottom: 5px;" ng-repeat="record in newlayout.display" align="center">
                <a class="btn btn-app" ng-href="#newlayout/{{newlayout.url}}{{newlayout.itemValue}}" >
                    <span class="badge bg-yellow" style="font-size:22px;">{{record.numberOfSamples}}</span>
                    <i class="fa fa-{{newlayout.labStyle}}"></i> {{record.lab}}
                </a>
            </div>
        </div>

    </div>
</div>

My issue is that the second part of the binded variable itemValue should be dynamic

In my Js, I have this

    newLayout.url = 'sublabs/?labName=';
    newLayout.itemValue = 'record.lab';

The URL is dynamic. When I click on the first displayed Icon, the url should look like this :

But it didn't work as I had a compilation error..

Does someone have an idea how to fix this:

http://localhost:8181/#/newlayout/sublabs?labName=PIA/C1 - Shiftlabo

Where the record value "PIA/C1 - Shiftlabo" change.

So basically here if I change 

 <a class="btn btn-app" ng-href="#newlayout/{{newlayout.url}}{{newlayout.itemValue}}" >

{{newlayout.itemValue}} by {{record.lab}} it would work..but the {{record.**lab**}} should be dynamic as it will have another value when I click on the icon. It will change to {{record.subLab}}

Thanks

Upvotes: 0

Views: 32

Answers (1)

georgeawg
georgeawg

Reputation: 48948

Use property acccessor bracket notation inside the binding:

 <div>{{record[labOrSublab]}}</div>

JS

var isSublab = false;
$scope.labOrSublab = "lab";

$scope.clickHandler = function() {
    isSublab = !isSublab;
    $scope.labOrSublab = isSublab ? 'subLab' : 'lab';
};

Upvotes: 1

Related Questions