8

のパフォーマンスの問題を修正するために、さまざまなことを試しましたng-repeat。ここで説明されているものを含む: How to 'unwatch' an expression

ページに最大 1000 行までの大規模な行セットが必要です。すべての行にかなりのものが含まれています。そして今私には思えますが、それは非常に遅くなるだけng-repeatです。独自のカスタムを構築するかng-repeat、テーブル内のすべての行を構築するディレクティブを構築する必要があると思います...方法がわかりませんどちらかにすること。助けてください。いくつかの例を見せてもらえますか。

4

3 に答える 3

11

<dl> に <dt> と <dd> を入力する例を次に示します ...

ステップ 01 - widge.product.details.js を作成する

// $scope.details = [] //配列オブジェクトにバインド

angular.module('widget.product.details',[])
  .directive('productDetails',function(){
   return {
    template:'<dl class="dl-horizontal"></dl>',
    replace:true,
    restrict:'E',
    compile : function compile(tElement, tAttrs, transclude) {
     return {
      post: createProductDetails
     }
    }
   }
  });

var createProductDetails = function (scope, iElement, iAttrs, controller) {
    scope.$watch('details', function(newVal, oldVal) {
    angular.forEach(newVal, function(v,k){
        iElement.append( angular.element('<dt>'+v.dt+'</dt><dd>'+v.dd+'</dd>') );
        });
    });
}

ステップ 02 - HTML を作成する

<div class="span7" ng-controller="ProductInfoCtrl">
 <product-details></product-details>
</div>

ステップ 03 - app.product.js を作成する

function ProductInfoCtrl($scope) {
 $scope.details = [
                   {dt:'condition',dd:'brand new'},
                   {dt:'year bought',dd:'3 years ago'},
                   ]
}
于 2013-02-02T03:06:48.210 に答える
0

angularJS のカスタム ngReapeat ディレクティブの簡単なコード:

   <!DOCTYPE html>
   <html>
    <head>
       <script type='text/javascript' src='angular.min.js'></script>    
    </head>
    <body ng-app="customNgReapeat">
      <div ng-controller='ProductInfoCtrl'>
        <div custom-repeat></div>
      </div>    
    </body>
  </html>

JS コード

    var csREapeat = angular.module('customNgReapeat', [])
      .directive('customRepeat', function() {
        return {
          restrict: 'A',
          link: function(scope, iElement, iAttrs, controller) {
            angular.forEach(scope.details, function(v, k) {
              iElement.append(angular.element('<div>' + v.name + '</div>             <div>' + v.address + '</div>'));
            });
          }
        };
      })

 function ProductInfoCtrl($scope) {
   $scope.details = [
      {name: 'Nidhi', address: 'India-Gurgaon'},
      {name: 'Khushi', address: 'India-Ghazipur'}
   ];
}
于 2015-12-25T13:59:56.543 に答える