CODEWITHSUNDEEP
javascriptangularjs
Neha Sohail
Neha Sohail

Reputation: 239

List elements share same $index Angular js value?

I am trying to give the class "active" to each filter clicked/ I tried using $index but since there a multiple list items with the same $index (because I am repeating ul too) multiple list elements get the class active. Is there another way to do this?

HTML:

<div class="filter-options">
  <ul class="filters" ng-repeat="type in filterTypes" type="type.category">
    <li ng-repeat="filter in type.filters" ng-click="selectFilter($index)" ng-class="{'active': selectedFilter == $index}">{{filter.value | uppercase}}class="glyphicon glyphicon-menu-down"></span></li>
  </ul>
</div>

Directive:

return {
    restrict: "E",
    templateUrl: 'scripts/directives/all-filters.html',
    link: function(scope, el, attr) {           
        scope.filterTypes = dummyData.filters;

        scope.selectFilter = function(filterChosen){                
            scope.selectedFilter = filterChosen;
        };
    }
}

Upvotes: 1

Views: 85

Answers (1)

M. Junaid Salaat
M. Junaid Salaat

Reputation: 3783

You can send the object in the parameters and add a Boolean in the function like

Markup

<li ng-repeat="filter in type.filters" ng-click="selectFilter(filter)" ng-class="{'active': filter.active}">{{filter.value | uppercase}}class="glyphicon glyphicon-menu-down"></span></li>

Directive

scope.selectFilter = function(clickedFilter){                
            clickedFilter.active = true;
        };

Hope it helps

Upvotes: 1

Related Questions