注意：事件、循环、赋值在一起就出错
错误实例：
<!DOCTYPE html> <html ng-app="tab_switch"> <head> <meta charset="utf-8"> <title></title> <style media="screen"> .box input {background:#CCC} .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> <script src="angular.js" charset="utf-8"></script> <script> let mod=angular.module('tab_switch', []); mod.controller('test', function ($scope){ $scope.now=0; $scope.items={ '按钮1': 'dfsdffgsdg', '按钮2': '45terggf', '按钮3': 'redr67567t' } }); </script> </head> <body ng-controller="test"> <div class="box"> <input type="button" ng-repeat="(k,v) in items" value="{{k}}" class="{{$index==now?'active':''}}" ng-click="now=$index"> <div ng-repeat="v in items" class="{{$index==now?'cur':''}}">{{v}}</div> </div> </body> </html>
正确实例：
具体实现：
<!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>