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>