ionic ngRepeat追加數據（加載更多，不需要重復渲染dom數據）

1）模版循環在之前的隨筆中已經說過，使用挺簡單的 http://www.cnblogs.com/tujia/p/6078217.html

簡單來說就是控制器輸入一個數據變量，模版里用ng-repeat屬性來循環就可以了

<ion-list>
  <ion-item ng-repeat="item in lists">
    Hello, {{item.uname}}!
  </ion-item>
</ion-list>

 

2）現在問題來了，循環是可以，但我怎么追加呢？（異步更多）

以上面的例子為例，循環的變量是lists，是不是只要動態改變lists的值（追加lists的值），angular就會改變dom了呢？說做就做，舉個粟子：

function get_goods_list(arguments,params,_callback){
    var $scope             = arguments[0];
    var $http              = arguments[1];
    var $ionicLoading      = arguments[3];

    params.method         = 'b2c.goods.search_properties_goods';

    http_request($http, $ionicLoading, params, function(res){
        if(res.pager.current=='1'){
            $scope.lists = [];
            $scope.title     = document.title = res.title;
        }

        var _count         = $scope.lists.length;
        var len         = res.lists.length;

        //無數據，退出
        if(len<1) return false;

        for(var i=0,len=res.lists.length; i<len; i++){
            $scope.lists[_count+i] = res.lists[i];
        }

        if(_callback) _callback(res);
    })
}

多余的東西是我練習項目里的，不用管，關鍵的地方在這里

var _count         = $scope.lists.length;
var len         = res.lists.length;

//無數據，退出
if(len<1) return false;

for(var i=0,len=res.lists.length; i<len; i++){
    $scope.lists[_count+i] = res.lists[i];
}

 

3）其實就按上面的代碼已經基本可以實現追加的功能需求了，但還有一個問題

你可能會發現，雖然上面是所加的lists的值，但賦值給$scope時，它並不是所加，而是重新遍歷渲染過一遍所以dom數據，請看下圖

 

 

4）那怎么解決就個問題？？？

ng-repeat 其實還有一個提高效率寫法，只要加一個track by $index就可以了，寫法是這樣的

<ion-list>
  <ion-item ng-repeat="item in lists track by $index">
    Hello, {{item.uname}}!
  </ion-item>
</ion-list>

然后你刷新測試一下就會發現追加數據就會好使了！！！（不會重復渲染所有數據）

更詳細track by 用法看這里：https://docs.angularjs.org/api/ng/directive/ngRepeat

 

完。