前端之家收集整理的这篇文章主要介绍了
angularjs中的选项卡实例，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
angularjs中的bug
ng-click,赋值，ng-repeat三个一起用会有bug
一个angularjs的选项卡
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8" />
<title>angularjs中的选项卡</title>
<script src="https://cdn.staticfile.org/angular.js/1.5.5/angular.min.js"></script>
<style>
.Box input.active{
background:yellow
}
.Box div{
width:200px;
height:200px;
background:#CCC;
border:1px solid black;
display:none
}
.Box div.cur {
display:block;
}
</style>
</head>
<!--angularjs中的bug
ng-click,赋值，ng-repeat三个一起用会有bug-->
<body ng-app="tab_switch">
<div ng-controller="test">
<div class="Box">
<input type="button" ng-repeat="(k,v) in items" value="{{k}}" class="{{$index==now?‘active‘:‘‘}}" ng-click="setNow($index)" />
<!--angularjs中的bug
ng-click,赋值，ng-repeat三个一起用会有bug-->
<!--<input type="button" ng-repeat="(k,v) in items" value="{{k}}" class="{{$index==now?‘active‘:‘‘}}" ng-click="now=$index" />-->
<div class="{{$index==now?‘cur‘:‘‘}}" ng-repeat="v in items">
{{v}}
</div>
</div>
</div>
<script type="text/javascript">
let mod = angular.module("tab_switch",[]);
mod.controller("test",["$scope",function ($scope) {
$scope.now = 0;
$scope.items = {
"按钮1": "ssssds","按钮2": "ddddd","按钮3":"fffff"
};
$scope.setNow = function (num) {
$scope.now = num;
}
}]);
</script>
</body>
</html>
