angularjs实现选项卡实例
Posted 爱喝酸奶的吃货
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了angularjs实现选项卡实例相关的知识，希望对你有一定的参考价值。
注意：事件、循环、赋值在一起就出错
具体实现：
<!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实现选项卡实例的主要内容，如果未能解决你的问题，请参考以下文章