CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
Fons
Fons

Reputation: 51

ng-repeat how to handle a button element separately

I am using ng-repeat to populate data in a table so far so good. What i am trying to accomplish is to use a button and change it's text according to the userId (cust.id). I am trying to understand how to use a $scope inside a repeat method and modify it separately from the other elements.

On the following demo when i click to button with (userid value = 1) then i would like to change the specific button text and NOT every button in my ng-repeat

<button ng-click="perLineText(cust.id)">{{buttonText}}</button>

Live Demo

I am trying to figure out how to handle specific elements in my ng-repeat. Any help much appreciated.

Upvotes: 1

Views: 311

Answers (3)

satchcoder
satchcoder

Reputation: 797

You can also use the ng-bind="perLineText(cust.id)" instead of the {{buttonText}} so the ng-click will toogle something and the perLineText will return Start or Stop.

Upvotes: 0

DonJuwe
DonJuwe

Reputation: 4563

A good way to handle this problem is using $index. Just pass it when calling your perLineText($index) function so you know which row you are in. Now you can simply work with the appropriate index object in your array which might my $scope.customers[index]

Upvotes: 0

Chandermani
Chandermani

Reputation: 42669

You can do that by just using the this in you controller function instead of $scope.

$scope.perLineText = function(customerId){
   if (customerId === 1) {
     this.buttonText = 'Stop';
   };

See the updated fiddle http://jsfiddle.net/u5swjwv1/

On a click callback this points to the scope of nested repeat element. If you use $scope you are actually referring to the parent scope object.

Look at this explanation too 'this' vs $scope in AngularJS controllers

Upvotes: 1

Related Questions