导航栏选中效果 ng-repeat

最新推荐文章于 2023-11-18 11:58:21 发布

转载最新推荐文章于 2023-11-18 11:58:21 发布 · 139 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xu-blog/p/6753451.html

文章标签：

#javascript #ViewUI

 1 <body ng-controller="zfpxCtrl">
 2 <ul class="nav nav-tabs">
 3     <li ng-repeat="menu in menus" ng-click="click(menu.name)" role="presentation" ng-class="{active:selectedMenu == menu.name}"><a href="#">{{menu.name}}</a></li>
 4 </ul>
 5 <div class="container">
 6     <form action="">
 7         <div class="form-group" ng-class="{'has-error':username.length<=3,'has-warning':username.length<=6,'has-success':username.length>6}">
 8             <label class="control-label" for="username">用户名</label>
 9             <input class="form-control" type="text" id="username" ng-model="username" >
10         </div>
11     </form>
12 </div>
13 
14 </body>
15 <script src="../lib/angular/angular.js"></script>
16 <script>
17     angular.module('zfpxMod',[]);
18     angular.module('zfpxMod').controller('zfpxCtrl',function($scope){
19         $scope.selectedMenu = 'Home';
20         $scope.menus = [
21             {name:'Home'},
22             {name:'Profile'},
23             {name:'Message'}
24         ]
25         $scope.click = function(name){
26             $scope.selectedMenu = name;
27         }
28     });
29 </script>