angularjs-指令ng-disable,ng-repeat,ng-checked

#ng-disable 禁用標籤
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <script src="js/angular.min.js"></script>
 </head>
 <body>
  <div ng-app="app" ng-controller="ctrl">
   同意:<input type="checkbox" ng-model="status" ng-init="status=0"/><br />
   <input type="button" value="登陸" ng-disabled="!status"/>
   </ul>
  </div>

  <script type="text/javascript"> 
   var m=angular.module('app',[]);
   m.controller('ctrl',['$scope',function($scope){
    }]); 
   
  </script>
 </body>
</html>
#ng-repeat 標籤,遍歷對象
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <script src="js/angular.min.js"></script>
 </head>
 <body>
  <div ng-app="app" ng-controller="ctrl">
   <ul>
    <li ng-repeat="d in odata">
     my name is `d`.`name`,i am `d`.`age`
    </li>
   </ul>
  </div>

  <script type="text/javascript"> 
   var m=angular.module('app',[]);
   m.controller('ctrl',['$scope',function($scope){
     $scope.odata=[
     {'name':'cxiong','age':29},
     {'name':'xmzhang','age':29}
     ]
    }]); 
   
  </script>
 </body>
</html>

#ng-repeat 標籤,遍歷數組
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <script src="js/angular.min.js"></script>
 </head>
 <body>
  <div ng-app="app" ng-controller="ctrl">
   <ul>
    <!--報錯:數組中存在重複元素,track by $index-->
    <li ng-repeat="d in odata track by $index">
     my name is `d`
    </li>
   </ul>
  </div>

  <script type="text/javascript"> 
   var m=angular.module('app',[]);
   m.controller('ctrl',['$scope',function($scope){
     $scope.odata=['xmzhang','cxiong','fjwu','cxiong']
    }]); 
   
  </script>
 </body>
</html>
#ng-checked 實現全選和反選
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <script src="js/angular.min.js"></script>
 </head>
 <body>
  <div ng-app="app" ng-controller="ctrl">
   <table border="" cellspacing="" cellpadding="">
    <tr>
     <th><input type="checkbox" ng-checked="status" ng-model="status"/>`status`</th>
     <th><span >{{status?'取消':'全選'}}</span></th>
    </tr>
    <tr ng-repeat="d in odata track by $index">
     <td><input type="checkbox" ng-checked="status"/></td>
     <td>`d`</td>
    </tr>
   </table>
  </div>

  <script type="text/javascript"> 
   var m=angular.module('app',[]);
   m.controller('ctrl',['$scope',function($scope){
     $scope.status=true
     $scope.odata=['xmzhang','cxiong','fjwu','cxiong']
    }]); 
   
  </script>
 </body>
</html>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章