使用angular.js切換項目上的活動類

Question

如果我有以下代碼，如何在元素上切換活動類？

<div class="searchandfilter">
    <span ng-repeat="taxonomy in taxonomies" class="tab-controller" ng-class="{'active': $index == 0}">
        <ul>
            <li class="tab" ng-click="onClickTab(taxonomy)">{{taxonomy.name}}</li>
        </ul>
        <span class="tab-content">
            <span ng-repeat="child in taxonomy.children">
                <input type="checkbox" checked="child.value" />{{child.name}}
            </span>
        </span>
    </span>

加載時，我需要將第一個Tab-roller跨度設置為active，這現在是正確的，但是我無法切換活動類onclick。 選項卡的數量是動態的，因此可以是1或10。當前，它生成的選項卡如下：

<span class="tab-controller ng-scope active" ng-class="{'active': $index == 0}" ng-repeat="taxonomy in taxonomies">
<ul>
<li class="tab ng-binding" ng-click="onClickTab(taxonomy)">Tab 1</li>
</ul>
</span>

<span class="tab-controller ng-scope" ng-class="{'active': $index == 0}" ng-repeat="taxonomy in taxonomies">
<ul>
<li class="tab ng-binding" ng-click="onClickTab(taxonomy)">Tab2</li>
</ul>
</span>

Answer 1

您需要在標簽中具有一些屬性，才能與ng-repeat中的$ index進行比較。

例如：

<div class="tab-controller" ng-class="{'active': $index == currentTab}" ng-repeat="taxonomy in taxonomies">
    <ul>
        <li class="tab" ng-click="onClickTab(taxonomy.tab)">{{ taxonomy.name }}</li>
    </ul>
</div>

分類法應該是一組對象，例如：

var taxonomies = [
    { id: 0, name: 'Tab 1', tab: 'whatever you need here'},
    { id: 1, name: 'Tab 2', tab: 'whatever you need here'},
    { id: 2, name: 'Tab 3', tab: 'whatever you need here'}
];

當您調用函數onClickTab時，應將變量scope.currentTab設置為單擊的選項卡的ID。

希望能幫助到你。

Answer 2

您可以通過傳遞索引並設置范圍變量來實現。

 var app = angular.module('app', []); app.controller('myController', function($scope) { $scope.taxonomies = [ {name: 'a', children: [{name: 'a', value: false}]}, {name: 'b', children: [{name: 'a', value: true}, {name: 'b', value: false}]} ]; $scope.onClickTab = function(idx) { $scope.selectedIndex = idx; }; $scope.selectedIndex = 0; });

 .active { color: green; font-weight: bold; }

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <div ng-app='app' ng-controller='myController'> <div class="searchandfilter"> <span ng-repeat="taxonomy in taxonomies" class="tab-controller" ng-class="{'active': $index == selectedIndex}"> <ul> <li class="tab" ng-click="onClickTab($index)">{{taxonomy.name}}</li> </ul> <span class="tab-content"> <span ng-repeat="child in taxonomy.children"> <input type="checkbox" ng-model="child.value">{{child.name}} </span> </span> </span> </div> </div>

這種方法的問題是，如果分類法發生更改，那么selectedIndex可能不再與selected選項卡匹配，因此您可以跟蹤整個對象而不是跟蹤索引：

 var app = angular.module('app', []); app.controller('myController', function($scope) { $scope.taxonomies = [ {name: 'a', children: [{name: 'a', value: false}]}, {name: 'b', children: [{name: 'a', value: true}, {name: 'b', value: false}]} ]; $scope.onClickTab = function(selected) { $scope.selected = selected; }; $scope.selected = $scope.taxonomies[0]; });

 .active { color: green; font-weight: bold; }

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <div ng-app='app' ng-controller='myController'> <div class="searchandfilter"> <span ng-repeat="taxonomy in taxonomies" class="tab-controller" ng-class="{'active': taxonomy === selected}"> <ul> <li class="tab" ng-click="onClickTab(taxonomy)">{{taxonomy.name}}</li> </ul> <span class="tab-content"> <span ng-repeat="child in taxonomy.children"> <input type="checkbox" ng-model="child.value">{{child.name}} </span> </span> </span> </div> </div>

Answer 3

對不起，如果錯了，嘗試這個

http://plnkr.co/edit/FdueM4rAvd4k6hClK1HR?p=preview

您的html將是

<html>

<head>
  <script data-require="angular.js@*" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="app">

  <div class="searchandfilter" ng-controller="tab-controller">

    <span ng-repeat="taxonomy in taxonomies">
        <ul  ng-class="{'active': $index == selectedIndex}">
            <li class="tab" ng-click="onClickTab(taxonomy.id)">{{taxonomy.name}}
              <br/>
                <span class="tab-content">
                  <span ng-repeat="child in taxonomy.children">
                      <input type="checkbox" ng-model="child.value" />{{child.name}} 
                  </span>
                </span>
            </li>
        </ul>
    </span>
  </div>

</body>
</html>

角度js代碼將是

  var app = angular.module("app",[]);
    app.controller('tab-controller',['$scope',function($scope){

    $scope.taxonomies = [
    { id: 0, name: 'hello' , children:[{name:"test1",value:true},{name:"test2",value:false}]},
    { id: 1, name: 'how' , children:[{name:"test5", value: false}]},
    { id: 2, name: 'are you',children:[{name:"test4",value: true}]}
    ];

    $scope.onClickTab= function(x){
      $scope.selectedIndex= x;
    };

  }]);

CSS代碼將是

.active{
  background-color:green;
}

body {
    background-color: yellow;
}

使用angular.js切換項目上的活動類

問題描述

3 個解決方案

解決方案1
1 2015-05-20 12:15:29

解決方案2
1 已采納 2015-05-20 12:33:47

解決方案3
0 2015-05-20 12:56:55

使用angular.js切換項目上的活動類

問題描述

3 個解決方案

解決方案1 1 2015-05-20 12:15:29

解決方案2 1 已采納 2015-05-20 12:33:47

解決方案3 0 2015-05-20 12:56:55

解決方案1
1 2015-05-20 12:15:29

解決方案2
1 已采納 2015-05-20 12:33:47

解決方案3
0 2015-05-20 12:56:55