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

如果我有以下代碼，如何在元素上切換活動類？用angular.js切換項目上的活動類

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

在負載我需要設置第一製表電腦板跨度爲主動，這是目前正確的，但我不能切換的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>

來源

2015-05-20 Gabriel

您可以通過傳遞索引並設置範圍變量來完成此操作。

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可能不再與所選選項卡等等，而不是跟蹤指數匹配，你可以跟蹤整個對象：

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>

來源

2015-05-20 12:33:47 DTing

你需要在你的標籤某些屬性可以比較反對在該$指數NG-重複。

例如：

<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。

希望它有幫助。

來源

2015-05-20 12:15:29 Tamy

對不起，如果上午wron克，試試這個

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

你的HTML將

<html> 

<head> 
    <script data-require="[email protected]*" 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; 
}

來源

2015-05-20 12:56:55

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

回答

相關問題