Note: Events, loops, and assignments together make an error
Implementation:
<!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 = { ' Button1 ' : ' 111111 ' , ' Button2 ' : ' 222222 ' , ' Button3 ' : ' 333333 ' , ' Button4 ' : ' 444444 ' , }; $scope.setNowFun=function(index){ $scope.now=index; } // Events, loops, and assignments together cause an error }); </ 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>