ng-click="tab = $index" don't work in angular

Question

I have this in my app:

<li ng-repeat="name in tabs track by $index" ng-class="{selected: tab==$index}" ng-click="tab = $index">{{name}}</li>

and it don't work, selected class is enabled when I click on the item (each li I click have this class and it's not removed when I click other li) and tab is not updating, it work when I use this:

<li ng-repeat="name in tabs track by $index" ng-class="{selected: tab==$index}" ng-click="switchTab($index)">{{name}}</li>

scope.switchTab = function(index) {
  scope.tab = index;
};

why is this happening, why ng-click="tab = $index" don't work?

Are you able to get index argument inside controller function? — Dhaval Marthak
– Dhaval Marthak, Commented Jan 10, 2017 at 11:06
@DhavalMarthak it was a typo it should be scope.tab = index; — jcubic
– jcubic, Commented Jan 10, 2017 at 11:41

Community · Accepted Answer · 2017-05-23 11:46:04Z

5

You have a typo, change to:

scope.switchTab = function(index) {
  scope.tab = index;
};

You used $index even though the parameter in your function is index.

Edit: The reason it works with a function and not an assignment directly, is that ng-repeat creates a new scope. When you do: tab = $index you create a new variable on that new scope, rather than updating the one on the $scope you think.

See this question for further in-depth info.

edited May 23, 2017 at 11:46

CommunityBot

11 silver badge

answered Jan 10, 2017 at 11:06

Omri Aharon

17.1k5 gold badges43 silver badges61 bronze badges

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

1 Comment

jcubic Over a year ago

It was a typo when I added the code, the question was why ng-click="tab = $index" don't work, switchTab is working.

Collectives™ on Stack Overflow

ng-click="tab = $index" don't work in angular

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related