AngularJs - 在点击上添加活动类的最佳实践(ng-repeat)

Question

我想在列表中单击添加活动类,我尝试了以下代码,但它在我的所有项目上添加了活动类:/:

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

最好的解决方案是通过角度来定位它,角度$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'**,**}
  

其余的是确保您的控制器传递了阵列号

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

并能够保存该阵列号selectedIndex以便在您的模板中使用

$scope.selectedIndex

ng-class语法

    {active: $index===selectedIndex}

当'$ index'等于'selectedIndex'时,转换为添加名为'active'的类