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>

输出

first Element:true //是第一个元素

middle Element:false //不是中间元素

last Element:false //不是最后一个元素

Index of Element: 0 //元素索引为0

At Even Position:true //处于奇数位置

At Odd Position:false //不处于偶数位置

first false

first Element:false

middle Element:true

last Element:false

Index of Element:1

At Even Position:false

At Odd Position:true

second true

first Element:false

middle Element:true

last Element:false

Index of Element:2

At Even Position:true

At Odd Position:false

third false

first Element:false

middle Element:false

last Element:true

Index of Element:3

At Even Position:false

At Odd Position:true

last true