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.

Community · Accepted Answer · 2017-05-23 12:28:31Z

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, 2017 at 12:28

CommunityBot

11 silver badge

answered Feb 3, 2015 at 14:49

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Fons Over a year ago

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 thank you for your time!

Chandermani Over a year ago

I am not sure what you scenario is. Is there a interval for each button or a common one. What is the scenario?

Fons Over a year ago

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.

DonJuwe · Accepted Answer · 2015-02-03 14:50:31Z

0

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]

answered Feb 3, 2015 at 14:50

DonJuwe

4,5634 gold badges37 silver badges60 bronze badges

Comments

satchcoder · Accepted Answer · 2015-02-03 14:55:35Z

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 3, 2015 at 14:55

satchcoder

7975 silver badges11 bronze badges

Collectives™ on Stack Overflow

ng-repeat how to handle a button element separately

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related