AngularJs – 点击添加活动类的最佳实践（ng-repeat）

我想添加一个活动类点击列表中，我尝试了下面的代码，但它增加了我的所有项目上的活动类：/：

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; }; } 

请给我一些帮助。

谢谢

Answer 1

最好的解决办法是通过angulars $index来定位它，这是数组中的对象索引/位置;

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 /控制器

 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

慢慢的回答，这是我得到的（可能会增加一点点）

工作演示： http : //jsfiddle.net/WVY7L/

模板

 <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; }; 

• 值得一提的是，在数据中，你应该不会有逗号。

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

其余的是确保您的控制器正在通过arrays号码

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

并能够保存该数组数selectedIndex用于您的模板

 $scope.selectedIndex 

ng类的语法

  {active: $index===selectedIndex} 

当'$ index'等于'selectedIndex'时，转换为名称'active'

Answer 3

我对晚会已经晚了，但是这是最可重用的模式，每次你都可以重写相同的function。

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; }; 

Answer 4

testing所选项目的ID：

 <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; }; }