Angularjs - How can it point to all the ng-repeat from on of them by a ng-click?

Question

What can I do to point to the other ng-repeat elements from the ng-click function? I would like to modify the {{nameClass}} of the other ng-repeat elements from a click to someone of them.

Html:

<li class="{{nameclass}}" ng-repeat="person in people" ng-click="somefunction()"></li>

javascript:

function somefunction(){
     this.nameclass = "some";
     //what to set the other classes???
}

That's all there... I would like to modify the {{nameClass}} of the other ng-repeat elements from a click to someone of them. — Donovant, Mar 23 '14 at 20:27
So you want all the items to have `some` class name after you click one of them? — dfsq, Mar 23 '14 at 20:31

score 2 · Accepted Answer · answered Mar 23 '14 at 21:08

2

You can pass in the class you want to set into the function on ng-click.see this plunk http://plnkr.co/edit/oXavr7CVTpPfPUZJO0f9?p=preview

answered Mar 23 '14 at 21:08

goutham

240
2
12

score 1 · Answer 2 · answered Mar 23 '14 at 21:44

You could also utilize ng-class and have that set some boolean to enable a given class on whatever objects you want.

In your controller

$scope.someFunction = function (){
    $scope.active = true;
}
$scope.someOtherFunction = function (){
    $scope.loading = true;
}

In your HTML

<li ng-class="{activeClass: active, someOtherClass: loading}" ng-repeat="person in people" ng-click="somefunction()"></li>

What this does is add "activeClass" to the class definition when "active" is true. I added a second one "someOtherClass" to further illustrate this example.

score 0 · Answer 3 · answered Mar 23 '14 at 20:42

0

If your goal is to set the same class value to all the items then you should use $scope.nameclass:

function somefunction(){
    $scope.nameclass = "some";
}

And the different is that when you use this.nameclass you set nameclass property of the current item scope, not the parent scope all items belong to. When you set it to $scope object then all the LI items inherit nameclass not only clicked one.

answered Mar 23 '14 at 20:42

dfsq

191,768
25
236
258

Yes I know, but if I wanted to set all the class at some value, and after the class of the "this" ng-repeat element.. The next time when I gonna click to another ng-repeat element, the class of element before keep its old value. – Donovant Mar 23 '14 at 20:55
I created a Plunker for you: http://plnkr.co/edit/lzribQXc9E5w6LDTFDwB?p=preview the class some has red text: .some { color: red;} when you click an item all turn red. Feel free to modify the example. Hopefully this would help us understand better what you need. – PeterFromCologne Mar 23 '14 at 21:03

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

I believe this is what you're looking for:

<li ng-class="{true: 'someOther'}[$index!=selectedIndex]" 
    ng-repeat="person in people" ng-click="somefunction($index)">{{person}}</li>

$scope.people = ['Peter','Paul','Mary'];
$scope.selectedIndex = 0;
$scope.somefunction = function(index) {
  $scope.selectedIndex=index;
};

In Plunker:

http://plnkr.co/edit/2IsD2W3YclUe0Bc5Q93a?

When you click on an item, the index of this item is set as the selectedIndex property on the scope.
All items which index does not equal this selectedIndex gets the class 'someOther' applied to it.

Full explanation of the expression in ng-class:

https://stackoverflow.com/a/18126926/2331058

no repeat elements, indipendent elements, it allow you to select both as well. — Donovant, Apr 03 '14 at 22:15

Angularjs - How can it point to all the ng-repeat from on of them by a ng-click?

4 Answers4