?

引言

本文主要介紹了另一種即具有與ng-repeat 一樣處理大量數據的綁定的功能，又具有超高的性能。

對于處理小數量，ng-repeat是非常有用的，但是如果需要處理非常大的數量集，還是采用自定義的方法更好一些。

也別是數據大多都是靜態的或已預存儲好的，這個時候應避免使用ng-repeat指令。

?

ng-repeat中的表達式和 $watch

Angular中的表達式都會創建$watch 的Scope 函數。用于監聽模型變化，當你的模型部分發生變化時它會通知你。在ng-repeat指令中，如果某行數據有15列數據都綁定了表達式，如果數據有1000多行的話，那么$watch就將近15000個，這性能簡直難以想象。

?

所以當我們想要實現ng-repeat的功能又想兼備性能，那只能另找一種方法了。

?

替換ng-repeat的方法

如果內容是靜態的，我們不需要兩種方式的綁定，只需要執行一次賦值語句{{::value}}就可以。如果anguluarJS是1.3以下的舊版本，是不支持的一次性綁定語法的。那么最好的方法就是自定義指令，換言之，靜態數據可以使用一些簡單的方法來格式化。

?

實現步驟

• 首先創建無序列表，用于保存動態綁定的內容。

創建UL標簽作為容器用于顯示列表

我們選擇動態加載List中的數據，首先添加div標簽，并命名為"repeater-alternative"用于渲染流中。

<div><ul><div repeater-alternative></div></ul> </div>

?

• 定義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函數 ?

?

?

• 實際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(''); });

?

• List格式化邏輯

一旦collectionObject的值已被賦給其他變量，就需要定義顯示數據的表格。

• 如何獲取分配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。

?

支持 AngularJS 的控件集

Wijmo 天生就支持了 AngularJS 框架，現在 Wijmo 又全球第一個支持 AngularJS 2 框架。Wijmo 中提供了大量的支持 AngularJS 及 AngularJS 2 的Demo。

Wijmo 是為企業應用程序開發而推出的一系列包含 HTML5 和 JavaScript 的開發控件集。

它包含 Wijmo 5（先進的JavaScript控件）、Wijmo 3（經典的jQuery小部件）、金融圖表、FlexSheet、OLAP。無論您的應用程序是移動端、PC端、還是必須要支持IE6，Wijmo Enterprise 均能滿足您的需求。

了解更多信息請訪問 Wijmo官網

總結

以上是生活随笔為你收集整理的AngularJS：如何使用自定义指令来取代ng-repeat的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。