Verwendung von benutzerdefinierten Anweisungen in AngularJS, um ng zu ersetzen-Methode repeat

Einleitung

Alle wissen, dass ng-repeat ist sehr nützlich, aber wenn es erforderlich ist, sehr große Mengen zu verarbeiten, ist es besser, benutzerdefinierte Methoden zu verwenden. Insbesondere wenn die Daten hauptsächlich statisch sind oder bereits vorgeladen sind, sollte ng-repeat-Befehl.

ng-repeat-Ausdrücke und $watch

In Angular werden Ausdrücke im $watch-Scope-Funktion erstellt. Es wird verwendet, um Modelländerungen zu überwachen. Wenn ein Teil des Modells ändert sich, wird es Sie benachrichtigen. In ng-im repeat-Befehl, wenn eine Zeile Daten15Datenbindungen, wenn die Daten10Es gibt mehr als 00 Zeilen, dann hat $watch15000 Elemente haben, ist die Leistung einfach nicht vorstellbar.

Daher, wenn wir ng-repeat-Funktion sowohl Leistung als auch Kompatibilität haben möchte, bleibt nur eine andere Methode.

ng-Methode repeat

Wenn der Inhalt statisch ist, benötigen wir keine der beiden Bindungsmethoden und müssen nur eine Zuweisungsanweisung {{::value}} ausführen. Wenn anguluarJS ist1.3Die alten Versionen unterstützen nicht die一次性绑定语法。Daher ist der beste Weg, eine benutzerdefinierte Anweisung zu erstellen, das heißt, statische Daten können mit einfachen Methoden formatiert werden.

Schritte zur Implementierung

1、Erstellen Sie zunächst eine nichtnumerierte Liste, um dynamisch gebundene Inhalte zu speichern.

Erstellen Sie ein UL-Tag als Container, um die Liste anzuzeigen

Wir wählen die dynamische Lade der Daten aus der Liste, fügen zunächst das div-Tag hinzu und benennen es "repeater"-alternative"zur Darstellung im Strom verwendet.

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

2、Listendaten definieren：

//Beispieldaten
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; //zu der Funktion $scope zugewiesen wird

3、Echter Inhalt der Liste

Der Hauptzweck ist die Anwendung auf wiederholte Sammlungsobjekte und die Anzeige in der Liste, daher muss die Logik des Zugriffskreislaufs festgelegt und die Zeichenfolgen gemäß den Anforderungen formatiert werden.

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、Listennormalisierungsalgorithmus

Sobald der Wert von collectionObject anderen Variablen zugewiesen wurde, muss ein Tisch zur Anzeige der Daten definiert werden.

5、Wie man die Zeit der Zuweisung von CollectionObject erhält

Angular überwacht die Änderungen des Werts von $scope, und wenn der Wert geändert wird, wird $watch ausgelöst, daher muss die Zuweisungslogik von CollectionObject in $scope.$watch integriert werden.

Der Code lautet wie folgt:

$scope.$watch($scope.object, function (oldValue, newValue) { 
})

Das bedeutet, wenn wir eine Zuweisungsanweisung ausführen, verarbeitet Angular dieses Ereignis und formatiert den Inhalt der Liste.

$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('');
 });
})

Nun wird der Inhalt in das Tabellensteuerelement gerendert, das ist HTML<DIV>repeater-im "alternative"-Tag.
Zunächst muss das Angular-Directive-Mechanismus verstanden werden, kurz gesagt, wir geben Angular an, dass bei Entdeckung der angegebenen Variable eine Hintergrundverarbeitung ausgeführt wird.

var userDirectives = angular.module([]);
userDirectives.directive('DOMElementFound', function () {
 return {
  replace: true,
  function ($scope, $elem, attrs) {
     //Hintergrundverarbeitungsaufgaben }
 }
});

Wir informieren Angular, wenn "repeater"-Falls das "alternative"-Element vorliegt, rendern Sie die folgenden Daten in die Listezeile.

Der Code lautet wie folgt:

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('');
    });
    //Wenn IE Ihr Hauptbrowser ist, wird empfohlen, innerHTML zu verwenden, um die Leistung zu verbessern
    $elem.context.innerHTML = tableRow;
    //Wenn IE nicht Ihr Hauptbrowser ist, reicht es aus, den Inhalt in das Element hinzuzufügen.
    //$elem.append(tableRow);
   });
  }
 }
});

Zusammenfassung

In diesem Artikel wird hauptsächlich ng-Die Arbeitsweise und die Logik von repeat, aber nur auf statisches Inhalt beschränkt, daher sind die Ausgabeergebnisse mit der Ausgabe von ng-Der repeat-Wert ist gleich, aber die Rendering ist schneller, da dieser Methode nur eine Art der Datenbindung und eine geringe Anzahl von $watch zur Verfügung stehen. Dies ist der Inhalt des gesamten Artikels, ich hoffe, dass der Inhalt dieses Artikels Ihnen bei Ihrem Lernen oder Ihrer Arbeit helfen kann. Wenn Sie Fragen haben, können Sie einen Kommentar hinterlassen.