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>