我想在列表中单击添加活动类,我尝试了以下代码,但它在所有项目中添加了活动类:/:
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>
:
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; }; }
请给我一些帮助。
谢谢
最好的解决方案是通过角度$index作为目标,即对象在数组中的索引/位置。
$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