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

  1. Outils en ligne
  2. Emplacement actuel
  3. Page d'accueil
  4. Notes d'expérience

Utilisation des instructions personnalisées AngularJS pour remplacer ng-Méthode repeat

Texte principal

Préambule-tous le monde sait que pour traiter de petites quantités, ng-repeat est très utile, mais si vous devez gérer de très grandes quantités de données, il est préférable d'utiliser une méthode personnalisée. En particulier, lorsque les données sont majoritairement statiques ou préenregistrées, il est préférable d'éviter d'utiliser ng

dans l'instruction repeat.-dans les expressions et $watch

Les expressions d'Angular créent un fonction Scope $watch. Utilisé pour écouter les changements de modèle, il vous notifie lorsque votre modèle change partiellement.-dans l'instruction repeat, si une ligne de données a15Les données de colonnes sont liées à des expressions, si les données ont1000 plus de lignes, alors $watch a une prime15000, cette performance est pratiquement impossible à imaginer.

Donc, quand nous voulons implémenter ng-la fonction repeat doit également être à la fois performante, alors il ne reste qu'une autre méthode.

remplacez ng-Méthode repeat

Si le contenu est statique, nous n'avons pas besoin des deux méthodes de liaison, il suffit d'exécuter une seule instruction d'affectation {{::value}}. Si angularJS est1.3Les versions anciennes suivantes ne supportent pas la syntaxe de liaison en une seule fois. Le meilleur moyen est donc de créer une instruction personnalisée, autrement dit, les données statiques peuvent être formatées avec des méthodes simples.

Étapes de mise en œuvre

1、Créer une liste non ordonnée pour enregistrer le contenu lié dynamiquement.

Créer un tag UL en tant que conteneur pour afficher la liste

Nous choisissons de charger dynamiquement les données de la liste, d'ajouter d'abord le tag div et de le nommer "repeater"-alternative" pour le rendu en flux.

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

2、Définir les données de la liste :

//Données d'exemple
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会处理这个事件，并格式化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,
  function link ($scope, $elem, attrs) {
     //后台处理操作 }
 }
});

我们会通知Angular，当发现"repeater-当发现"alternative"元素时，则将以下数据渲染到列表行中。

以下为代码：

var userDirectives = angular.module([]);
userDirectives.directive('repeaterAlternative', function () {
 return {
  replace : true,
  function link ($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('');
    });
    //Si Internet Explorer est votre navigateur principal, il est recommandé d'utiliser innerHTML pour augmenter les performances
    $elem.context.innerHTML = tableRow;
    //Si Internet Explorer n'est pas votre navigateur principal, il suffit d'ajouter le contenu à l'élément.
    //$elem.append(tableRow);
   });
  }
 }
});

Résumé

Dans cet article, nous avons principalement simulé ng-Le fonctionnement et la logique de repeat, mais uniquement pour le contenu statique, donc le résultat de la sortie est comparable à l'appel ng-Le résultat de repeat est le même, mais il est plus rapide à rendre car cette méthode ne comporte qu'une seule méthode de liaison de données et un petit nombre de $watch. Voici le contenu intégral de cet article, j'espère que le contenu de cet article pourra aider à votre apprentissage ou à votre travail. Si vous avez des questions, vous pouvez laisser des commentaires pour échanger.

Tutoriel de base
Vous pourriez aussi aimer