ng-repeat how to handle a button element separately

Question

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.

score 1 · Answer 1 · edited May 23 '17 at 12:28

1

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

edited May 23 '17 at 12:28

Community

1
1

answered Feb 03 '15 at 14:49

Chandermani

42,589
12
85
88

Chandermani, can you please help me on this one also...i am trying to use $interval and use a counter for each row separately...i tried to use 'this' instead of '$scope' but no luck. Here is the code... [Live Demo](http://jsfiddle.net/mfonsos/uthuzqnm/4/) thank you for your time! – Fons Feb 04 '15 at 17:03
I am not sure what you scenario is. Is there a interval for each button or a common one. What is the scenario? – Chandermani Feb 05 '15 at 03:34
Yes, i am trying to have an interval for each button separately. Each start button is attached to each line separately, the same with the stop button also. Thank you. – Fons Feb 05 '15 at 12:53

score 0 · Answer 2 · answered Feb 03 '15 at 14:50

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]

score 0 · Answer 3 · answered Feb 03 '15 at 14:55

0

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.

answered Feb 03 '15 at 14:55

satchcoder

797
5
11

ng-repeat how to handle a button element separately

3 Answers3