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

by

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

More Related Contents:

  1. How to pass parameters using ui-sref in ui-router to controller
  2. Way to ng-repeat defined number of times instead of repeating over array?
  3. How to set an iframe src attribute from a variable in AngularJS
  4. AngularJS Error: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https
  5. How to validate inputs dynamically created using ng-repeat, ng-show (angular)
  6. Losing scope when using ng-include
  7. AngularJS – Value attribute on an input text box is ignored when there is a ng-model used?
  8. AngularJS: No “Access-Control-Allow-Origin” header is present on the requested resource [duplicate]
  9. How to pass parameters using ui-sref in ui-router to the controller
  10. How to make ng-bind-html compile angularjs code
  11. What is the correct syntax of ng-include?
  12. angularjs to output plain text instead of html
  13. AngularJS – ng-disabled not working for Anchor tag
  14. Image loaded event in for ng-src in AngularJS
  15. Template does not update when using ui-router and ion-tabs
  16. AngularJS: Better way to watch for height change
  17. How to remove an item from an array in AngularJS scope?
  18. CSS: Change parent on focus of child
  19. Angularjs does not load scripts within ng-view
  20. In AngularJS, any inline javascript code that included in HTML templates doesn’t work
  21. Print a div using javascript in angularJS single page application
  22. Remove ‘All Files’ option from HTML file input
  23. angularjs custom filter to check for values inside a data array
  24. Webstorm: “Cannot Resolve Directory”
  25. AngularJS using $rootScope as a data store
  26. angularjs form reset error
  27. Clear localStorage on tab/browser close but not on refresh
  28. Rename Object Key in an array using javascript
  29. multiple ui-view html files in ui-router
  30. Decode HTML entity in Angular JS

Leave a Comment