web-dev-qa-db-ja.com

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

}

助けてください。

ありがとう

javascripthtml5angularjs
37
AimenZenasni

最適な解決策は、角度$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/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 [〜＃〜]

68
dcodesmith

答えが遅い、ここに私が得たものがあります（もう少し追加するかもしれません）

WORKING DEMO：http://jsfiddle.net/WVY7L/

[〜＃〜] template [〜＃〜]

<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」という名前のクラスを追加するように変換します

9
Rob Sedgwick

私はパーティーに遅刻していますが、これは最も再利用可能なパターンであり、毎回同じ関数を書き直す必要がありません。

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

選択したアイテムの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; 
        };

    }
1
Voltrone