注意：事件、循环、赋值在一起就出错
具体实现：
<!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>angularjs实现选项卡实例
原文地址：https://www.cnblogs.com/yingzi1028/p/8963569.html