注意：事件、循环、赋值在一起就出错
具体实现：
<!DOCTYPE html>
<html ng-app="test">
<head>
<title>选项卡实例</title>
<script src="js/angular.js" charset="utf-8"></script>
<style type="text/css">
.box button{
background-color: #ccc;
}
.box button.active{
background-color: pink;
}
.box div{
width: 200px;
height: 200px;
background-color: #ccc;
border:1px solid black;
display: none;
}
.box div.cur{
display: block;
}
</style>
<script type="text/javascript">
let mod = angular.module(‘test‘, []);
mod.controller(‘main‘, function($scope) {
$scope.now = 0;
$scope.item = {
‘按钮1‘: ‘111111‘,
‘按钮2‘: ‘222222‘,
‘按钮3‘: ‘333333‘,
‘按钮4‘: ‘444444‘,
};
$scope.setNowFun=function(index){
$scope.now=index;
}
// 事件、循环、赋值在一起就出错
});
</script>
</head>
<body ng-controller="main">
<div class="box">
<button ng-repeat="(k,v) in item" class="{{$index==now?‘active‘:‘‘}}" ng-click="setNowFun($index)">{{k}}</button>
<div ng-repeat="v in item" class="{{$index==now?‘cur‘:‘‘}}">{{v}}</div>
</div>
</body>
</html>
原文地址：https://www.cnblogs.com/yingzi1028/p/8963569.html
时间： 2024-10-29 19:21:11