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

dcodesmith · Accepted Answer · 2014-01-03 12:01:34Z

72

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

edited Jan 3, 2014 at 12:01

answered Jan 3, 2014 at 11:54

dcodesmith

9,6244 gold badges38 silver badges40 bronze badges

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

9 Comments

mautrok Over a year ago

I'm trying to understand how it works, but i don't realize one thing, how you can change the style of a single element in the ng-click rather than change the style of everyone?

dcodesmith Over a year ago

The click event is performed on one LI at a time and it's targeted by it's $index. So if you click on the first LI the index would be 0 and that's how it targets it. Hope that helps.

mautrok Over a year ago

yes ok, but it's the expression in the ng-class that's not so clear to me, essentially is it a boolean and when it's true it gain the class sel?

dcodesmith Over a year ago

Uep, so if the result from the expression on the ng-class directive is true then it sets the class sel on the LI and if not, it doesn't set it.

CoperNick Over a year ago

I wonder why this works: jsfiddle.net/f0mcLrxv (call function) but this not: jsfiddle.net/rseme7qn (set selected directly)

|

Rob Sedgwick · Accepted Answer · 2014-01-03 12:07:39Z

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'

great stuff, it is actually the same method as the accepted answer

gkiely · Accepted Answer · 2015-03-12 05:38:59Z

2

I'm well late to the party, but this is the most reusable pattern, and it will save you re-writing the same function every time.

HTML:

<ul>
  <li ng-repeat="item in list" ng-click="setActive(item, list)" ng-class="{active: item.active}"></li>
</ul>

JS:

$scope.list = [{}, {}];

$scope.setActive = function(item, list){
  list.some(function(item){
    if(item.active){
      return item.active = false;
    }
  });
  item.active = true;
};

answered Mar 12, 2015 at 5:38

gkiely

3,0071 gold badge25 silver badges37 bronze badges

Comments

Voltrone · Accepted Answer · 2014-01-03 11:50:42Z

Test on the ID of the selected item :

<div class="filters_ct" ng-controller="selectFilter">
    <ul>
        <li ng-repeat="item in filters"  ng-click="select(item)" ng-class="{sel: item.filterId == selected.filterId}">
            <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.filters = filters;
        $scope.selected = $scope.items[0];

        $scope.select= function(item) {
           $scope.selected = item; 
        };

    }

It doesn't work, i think the solution above is better, also thanks for your help
sorry i did not test the code, but what i wanted to point out here is that you must test on the attribute value ( item.filterId == selected.filterId ) instead of ( item == selected), anyway glad you found a solution.

Collectives™ on Stack Overflow

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

4 Answers 4

9 Comments

1 Comment

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

9 Comments

1 Comment

Comments

2 Comments

Linked

Related