文章出處

引言

本文主要介紹了另一種即具有與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);
            });
        }
    }
});