《我的Angular入坑記》——通過小例子看ng-repeat
阿新 • • 發佈：2019-01-13
為了簡單方便一點，筆者這裡的資料全部都是在前臺硬加上去的，一般專案裡的資料都是通過後臺抓取的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="angular.min.js"></script> </head> <body> <div ng-app="hd" ng-controller="ctrl"> <ul> <!--{{$first}}第一個 {{$last}}最後一個 {{$middle}}中間的 {{$even}}偶數行 {{$odd}}奇數行--> <li ng-repeat="(k,v) in data" style="{{k==0?'color:red':''}}"> <!--k是下標--> {{k}} 名稱：{{v.name}} 網址：{{v.url}} </li> <hr/> <li ng-repeat="(k,v) in data" style="{{$even?'color:red':''}}"> <span ng-if="$first" style="{{$first?'color:red':''}}">名稱：{{v.name}} 網址：{{v.url}}</span> <span ng-if="$middle">名稱：{{v.name}} 網址：{{v.url}}</span> <span ng-if="$last" style="{{$last?'color:green':''}}">名稱：{{v.name}} 網址：{{v.url}}</span> </li> <hr/> <!--以下標為判斷唯一性的標誌，若有兩個相同的元素則都輸出--> <li ng-repeat="v in info track by $index"> {{v}} </li> </ul> </div> <script> var m = angular.module('hd', []); m.controller('ctrl', ['$scope', function ($scope) { $scope.data = [ {name: '麻花騰', url: 'mht.com'}, {name: '麻雲', url: 'my.com'}, {name: '李彥紅', url: 'lyh.com'}, ]; $scope.info=['麻花騰','麻雲','李彥紅','BAT','BAT']; }]); </script> </body> </html>
上述demo中的 (k,v) in data 是為了能在迴圈資料的同時對特別的資料進行操作，如何判斷那一個是我們想要操作的資料呢？只能通過下標來判斷，所以就需要新增一個下標k的標識來輔助我們進行判斷。
同時，如果存放資料的陣列或者物件中有相同的資料，但是你又想要都輸出，那麼在使用ng-repeat進行遍歷的時候就需要特別加上一句話 track by $index 以下標為判斷唯一性的標誌，而不是判斷內容是否相同。