前言
大家都知道對于處理小數量，ng-repeat是非常有用的，但是如果需要處理非常大的數量集，還是采用自定義的方法更好一些。特別是數據大多都是靜態的或已預存儲好的，這個時候應避免使用ng-repeat指令。
ng-repeat中的表達式和 $watch
Angular中的表達式都會創建$watch 的Scope 函數。用于監聽模型變化，當你的模型部分發生變化時它會通知你。在ng-repeat指令中，如果某行數據有15列數據都綁定了表達式，如果數據有1000多行的話，那么$watch就又獎金15000個，這性能簡直難以想象。
所以當我們想要實現ng-repeat的功能又想兼備性能，那只能另找一種方法了。
替換ng-repeat的方法
如果內容是靜態的，我們不需要兩種方式的綁定，只需要執行一次賦值語句{{::value}}就可以。如果anguluarJS是1.3以下的舊版本，是不支持的一次性綁定語法的。那么最好的方法就是自定義指令，換言之，靜態數據可以使用一些簡單的方法來格式化。
實現步驟
1、首先創建無序列表，用于保存動態綁定的內容。
創建UL標簽作為容器用于顯示列表
我們選擇動態加載List中的數據，首先添加div標簽，并命名為"repeater-alternative"用于渲染流中。
<div> <ul> <div repeater-alternative></div> </ul></div>
2、定義List 數據：
//示例數據var studentsList = [ { FirstName: "Raj, LastName : "B", Country : "India", BirthDate: "01/01/1990" }, { FirstName: "Kumar, LastName : "S", Country : "India", BirthDate: "01/01/1990" }, .................. .................. .................. ..................];$scope.collectionObject = studentsList; //分配給$scope函數3、實際List內容
主要目的適用于重復集合對象，并顯示到列表中，所以需要制定訪問循環的邏輯，并按照需求來格式化字符串。
var tableRow = "";angular.forEach($scope.collectionObject, function (item) { tableRow = tableRow + ['<li>', '<div class="col-md-1">' + item.FirstName + '</div> ', '<div class="col-md-1 ">' + item.LastName + '</div> ', '<div class="col-md-1 ">' + item.Country+ '</div> ', '<div class="col-md-1 ">' + item.Id + '</div> ', '<div class="col-md-1 ">' + $filter('date')(item.BirthDate, 'dd-MMM-yyyy') + '</div> ', '</li>'].join('');});4、List格式化邏輯
一旦collectionObject的值已被賦給其他變量，就需要定義顯示數據的表格。
5、如何獲取分配CollectionObject的時間
Angular會監控$scope變量值得改變，一旦值被修改，則$watch將被處罰，所以需要將CollectionObject賦值邏輯放到$scope變量的$watch中。
代碼如下：
$scope.$watch($scope.object, function (oldValue, newValue) { })即，當我們執行賦值語句是，Angular會處理這個事件，并格式化List的內容。
$scope.$watch('collectionObject', function (oldValue, newValue) { var tableRow = ""; angular.forEach($scope.collectionObject, function (item) { tableRow = tableRow + ['<li>', '<div class="col-md-1">' + item.FirstName + '</div> ', '<div class="col-md-1 ">' + item.LastName + '</div> ', '<div class="col-md-1 ">' + item.State + '</div> ', '<div class="col-md-1 ">' + item.Id + '</div> ', '<div class="col-md-1 ">' + $filter('date')(item.BirthDate, 'dd-MMM-yyyy') + '</div> ', '</li>'].join(''); });})接下來就是將內容渲染到表格控件中，也就是HTML<DIV>repeater-alternative標簽中。
首先必須理解Angular的Directive機制，簡單而言，就是我們來指示Angular,當指定的變量被發現，就開始執行后臺操作。
var userDirectives = angular.module([]);userDirectives.directive('DOMElementFound', function () { return { replace: true, link: function ($scope, $elem, attrs) { //后臺處理操作 } }});我們會通知Angular，當發現"repeater-alternative" 元素，則將以下數據渲染到列表行中。
代碼如下：
var userDirectives = angular.module([]);userDirectives.directive('repeaterAlternative', function () { return { replace : true, link: function ($scope, $elem, attrs) { $scope.$watch('collectionObject', function (oldValue, newValue) { var tableRow = ""; angular.forEach($scope.collectionObject, function (item) { tableRow = tableRow + ['<li>', '<div class="col-md-1">' + item.FirstName + '</div> ', '<div class="col-md-1 ">' + item.LastName + '</div> ', '<div class="col-md-1 ">' + item.State + '</div> ', '<div class="col-md-1 ">' + item.Id + '</div> ', '<div class="col-md-1 ">' + $filter('date')(item.BirthDate, 'dd-MMM-yyyy') + '</div> ', '</li>'].join(''); }); //If IE is your primary browser, innerHTML is recommended to increase the performance $elem.context.innerHTML = tableRow; //If IE is not your primary browser, just appending the content to the element is enough . //$elem.append(tableRow); }); } }});總結
在本文中，主要模擬了ng-repeat的工作方式和邏輯，但只限于靜態內容，所以輸出結果與調用ng-repeat結果相同，但是渲染更快，因為該方法只有一種數據綁定方式和少量的$watch。以上就是這篇文章的全部內容，希望本文的內容能對大家的學習或者工作有所幫助，如果有疑問大家可以留言交流。
新聞熱點
疑難解答
