用angular.js切换项目上的活动类
用angular.js切换项目上的活动类
提问于 2015-05-20 12:00:02
如果我有以下代码，如何切换元素上的活动类？
<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>
在加载时，我需要将第一个选项卡--conroller span设置为active，这现在是正确的，但我不能按一下切换active类。制表符的数量是动态的，所以它可以是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>Stack Overflow用户
发布于 2015-05-20 12:56:55
对不起，如果我错了，试试这个
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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30349032
复制相关文章
相似问题
腾讯云开发者
