Anjular筆記4--ng-repeat的應用

時間 2019-11-13

標籤 anjular 筆記 repeat 應用简体版

原文原文鏈接

ng-repeat :1.顯示一組HTML元素 2.顯示一個對象的全部屬性名及屬性值html

ng-repeat 指令能夠接受相似「variable(變量) in arrayExpression （數組表達式）」或（key , value） in objectExpression(對象表達式) 這些格式的參數。當參數爲數組時，數組中元素根據定義前後順序排列。數組

<!DOCTYPE html>
<html ng-app="notesApp">
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script src="js/angular.min.js"></script>

       </head>
   <body ng-controller="MainCtrl as ctrl">
      <div ng-repeat="(author,note) in ctrl.notes">
           <span class="label">{{note.label}}</span> 
           <span class="author" ng-bind="author"></span> 
       </div>

       <script>
           angular.module('notesApp',[]).controller('MainCtrl',[

           function(){
               var self=this;
               self.notes={
                   shyam:{
                       id:1,
                       label:"first",
                       done:false,
                   },
                   Misko:{
                       id:2,
                       label:"second",
                       done:true,
                   },
                   brad:{
                       id:3,
                       label:"third",
                       done:false,
                   }

               }
           }])
       </script>
   </body>
</html>app

輸出：this

first shyamspa

second Miskohtm

third brad對象

ng-repeat中的輔助變量索引

元素的索引：ip

第一個，中間、最後一個、以及奇、偶性。it

每個以 $ 爲前綴的變量都是 angular JS 內置的它能夠提供當前元素的某些統計信息

$first 、$middle 和 $last 都是布爾型變量，返回一個布爾值，判斷對應數組中的當前元素是不是第一個，中間仍是最後。是返回true 不然返回false

$index 給出當前元素的索引值，出於數組中第幾個。

$odd 和 $even 表明着它的索引值的奇、偶性。，能夠用來在奇、偶行上顯示不一樣風格的元素，或其餘條件判斷。

<!DOCTYPE html>
<html ng-app="notesApp">
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script src="js/angular.min.js"></script>
       </head>
   <body ng-controller="MainCtrl as ctrl">
       <div ng-repeat="note in ctrl.notes">
           <div> first Element:{{$first}}</div>
           <div> middle Element:{{$middle}}</div>
           <div> last Element:{{$last}}</div>
           <div> Index of Element:{{$index}}</div>
           <div> At Even Position:{{$even}}</div>
           <div> At Odd Position:{{$odd}}</div>

           <span class="label">{{note.label}}</span>
           <span class="status" ng-bind="note.done"></span>
           <br /><br />
       </div>

       <script>
           angular.module('notesApp',[]).controller('MainCtrl',[

           function(){
               var self=this;
               self.notes={
                   shyam:{
                       id:1,
                       label:"first",
                       done:false,
                   },
                   Misko:{
                       id:2,
                       label:"second", 
                       done:true,
                   },
                   lala:{
                       id:3,   
                       label:"third",
                       done:false,
                   },

                   brad:{
                       id:4,
                       label:"last",
                       done:true,
                   }

               }
           }])
       </script>
   </body>
</html>