天天看點

angular25-ng-repeat指令

<!DOCTYPE html>
     <html lang="en">
      
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>ng-app指令</title>
     </head>
     <!-- 需要angular的代碼必須包裹在ng-app的代碼中 -->
     <!-- ng-bind遇到html的時候會轉義 為了安全 -->
      
     <body ng-app="myApp1">
         <ul ng-controller="ListController">
             <li ng-repeat="item in data" data-id="{{item.id}}"><strong>{{item.name}}</strong><span>{{item.age}}</span>></li>
         </ul>
         <script src="./js/Angular.js"></script>
         <script>
             var myApp1 = angular.module('myApp1', []);
             myApp1.controller('ListController', ['$scope', function($scope) {
                 $scope.data = [];
                 for (var i = 0; i < 10; i++) {
                     $scope.data[$scope.data.length] = {
                         id: i,
                         name: 'geyao' + i,
                         age: 20 + i,
                     }
                 }
             }])
         </script>
     </body>
      
     </html>      

運作結果

angular25-ng-repeat指令