English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. 現在の位置
  2. ホームページ
  3. 経験記録
  4. 本文

AngularJSでカスタムディレクティブを使用して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以下の古いバージョンでは、一括バインド構文をサポートしていません。そのため、最善の方法はカスタムディレクティブを作成することです。言い換えれば、静的データは簡単な方法でフォーマット化できます。

実行手順

1、まず無序列表を作成し、動的にバインドする内容を保存します。

リストを表示するためのコンテナとしてULタグを作成します。

リストデータを動的にロードするために、まずdivタグを追加し、"repeater"と名付けます。-alternative"を使用してデータをレンダリングする。

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

2、リストデータの定義：

//サンプルデータ
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がイベントを処理し、リストの内容をフォーマットします。

$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,
  function ($scope, $elem, attrs) {
     //バックエンド処理操作 }
 };
});

Angularに「repeater」が見つかった場合に通知します。-「alternative」要素があれば、以下のデータをリスト行にレンダリングします。

以下はコードです：

var userDirectives = angular.module([]);
userDirectives.directive('repeaterAlternative', function () {
 return {
  replace : true,
  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('');
    });
    //IEが主要なブラウザの場合、パフォーマンスを向上させるためにinnerHTMLが推奨されます。
    $elem.context.innerHTML = tableRow;
    //IEが主要なブラウザでない場合、要素にコンテンツを追加するだけで十分です。
    //$elem.append(tableRow);
   });
  };
 };
});

まとめ

この記事では、ng-repeatの動作とロジックは同じですが、静的コンテンツに限られていますので、出力結果はng-repeatの結果は同じですが、このメソッドはデータバインディングの方法が一種で$watchが少ないため、レンダリングがより速くなります。これがこの記事のすべてです。本文の内容が皆さんの学習や仕事に役立つことを願っています。何か疑問があれば、コメントを残してください。

基礎教程
おすすめ