AngularJs - Best-Practices on adding an active class on click (ng-repeat)

Question

I want to add an active class on click in a list, i tried the following code, but it adds the active class on all my items :/ :

HTML :

<div class="filters_ct" ng-controller="selectFilter">     <ul>         <li ng-repeat="filters in filter"  ng-click="select(item)" ng-class="{sel: item == selected}">             <span class="filters_ct_status"></span>             {{filters.time}}         </li>     </ul> </div> 

Js :

  var filters = [             {                 'filterId': 1,                 'time': 'last 24 hours',             },             {                 'filterId': 2,                 'time': 'all',             },             {                 'filterId': 3,                 'time': 'last hour',             },             {                 'filterId': 4,                 'time': 'today',             },             {                 'filterId': 5,                 'time': 'yersteday',             }         ];    function selectFilter($scope) {      $scope.items = ['filters'];     $scope.selected = $scope.items[0];      $scope.select= function(item) {        $scope.selected = item;      };  } 

Please, give me some help.

Thanks

Answer 1

The best solution would be to target it via angulars $index which is the objects index/position in the array;

HTML

<div ng-app='app' class="filters_ct" ng-controller="selectFilter">     <ul>         <li ng-repeat="filter in filters" ng-click="select($index)" ng-class="{sel: $index == selected}">             <span class="filters_ct_status"></span>             {{filter.time}}         </li>     </ul> </div> 

JS/Controller

var app = angular.module('app', []);   app.controller('selectFilter', function($scope) { var filters = [             {                 'filterId': 1,                 'time': 'last 24 hours',             },             {                 'filterId': 2,                 'time': 'all',             },             {                 'filterId': 3,                 'time': 'last hour',             },             {                 'filterId': 4,                 'time': 'today',             },             {                 'filterId': 5,                 'time': 'yersteday',             }         ];       $scope.filters = filters;     $scope.selected = 0;      $scope.select= function(index) {        $scope.selected = index;      }; }); 

JSFIDDLE

Answer 2

Slow to answer, here is what I got ( might add a little more )

WORKING DEMO : http://jsfiddle.net/WVY7L/

TEMPLATE

<ul>     <li ng-repeat="filter in filters"         ng-click="select($index)" ng-class="{active: $index===selectedIndex}">         <span class="filters_ct_status"></span>         {{filter.time}}     </li> </ul> 

CONTROLLER

$scope.filters = [         { filterId: 1, time: 'last 24 hours'},         { filterId: 2, time: 'all' },         { filterId: 3, time: 'last hour'},         { filterId: 4, time: 'today' },         { filterId: 5, time: 'yersteday'}     ];  $scope.selectedIndex = 0; /* first one set active by default */ $scope.select= function(i) {   $scope.selectedIndex=i; }; 

• worth a mention that in the data you have trailing comma that should not be there.

   { filterId: 1, time: 'last 24 hours'**,**} 

The rest was ensuring your controller was being passed the array number

ng-click="select($index)" ng-class="{active: $index===selectedIndex}" 

and being able to save that array number selectedIndex for use in your template

$scope.selectedIndex 

ng-class syntax

    {active: $index===selectedIndex} 

Translates to add class with name of 'active' when the '$index' is equal to the 'selectedIndex'