English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Preface
As everyone knows, for small quantities, ng-repeat is very useful, but if you need to handle a very large number of sets, it is better to use a custom method. Especially when the data is mostly static or pre-stored, it is best to avoid using ng-repeat directive.
ng-In expressions and $watch of ng
In Angular, expressions will create a $watch Scope function. It is used to listen for model changes and notify you when a part of your model changes.-in the repeat directive, if a line of data has15Column data are bound to expressions, if the data has1000 more lines, then $watch has a bonus15000, the performance is simply unimaginable.
So when we want to implement ng-repeat function needs to have both performance, then you can only find another method.
replace ng-The Method of repeat
If the content is static, we do not need to bind in two ways, just execute the assignment statement {{::value}} once. If anguluarJS is1.3The following old version does not support the one-time binding syntax. The best method is to create a custom directive, in other words, static data can be formatted using some simple methods.
Implementation Steps
1First create an unordered list to save the dynamically bound content.
Create a UL tag as a container to display the list
We choose to dynamically load data from the List, first add a div tag and name it "repeater-alternative" for rendering in the stream.
<div> <ul> <div repeater-alternative></div> </ul> </div>
2Define List Data:
//Sample Data 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; //Assign to $scope function
3, Actual List content
The main purpose is to apply to repeated collection objects and display them in the list, so it is necessary to specify the access loop logic and format the strings according to the requirements.
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 formatting logic
, Once the value of collectionObject has been assigned to other variables, it is necessary to define the table to display the data.
5, How to get the time assigned to CollectionObject
Angular will monitor the change of the $scope variable value, and once the value is modified, the $watch will be triggered, so the assignment logic of CollectionObject needs to be placed in the $scope variable's $watch.
The code is as follows:
$scope.$watch($scope.object, function (oldValue, newValue) { })
That is, when we execute the assignment statement, Angular will handle this event and format the List content.
$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(''); }); })
Next is to render the content into the table control, that is, HTML<DIV>repeater-within the "alternative" tag.
Firstly, it is necessary to understand the Angular Directive mechanism, simply put, we instruct Angular to start backend operations when the specified variable is detected.
var userDirectives = angular.module([]); userDirectives.directive('DOMElementFound', function () { return { replace: true, link: function ($scope, $elem, attrs) { //Backend processing operation } } });
We will notify Angular when we find the "repeater-If the "alternative" element is found, the following data will be rendered into the list row.
The code is as follows:
var userDirectives = angular.module([]); userDirectives.directive('repeaterAlternative', function () { return { replace: true, link: 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(''); }); //If IE is your primary browser, innerHTML is recommended to increase the performance $elem.context.innerHTML = tableRow; //If IE is not your primary browser, just appending the content to the element is enough . //$elem.append(tableRow); }); } } });
Summary
In this article, the main simulation of ng-The working mode and logic of repeat, but only limited to static content, so the output result is the same as calling ng-The results of repeat are the same, but it renders faster because this method has only one data binding way and a small amount of $watch. This is the end of this article, I hope the content of this article can be helpful to everyone's learning or work, if you have any questions, you can leave a message for communication.