ANGULARJS uses a custom directive to replace Ng-repeat methods _angularjs

Objective

It is well known that ng-repeat is useful for handling small quantities, but it is better to use a custom method if you need to deal with a very large set of numbers. In particular, most of the data is static or has been stored well, this time should avoid the use of ng-repeat instructions.

Expressions and $watch in Ng-repeat

A function that is created by an expression in angular$watchScope. Used to listen for model changes, and it will notify you when part of your model changes. In the ng-repeat directive, if a row of data has 15 columns of data bound to the expression, if the data has more than 1000 lines, then the$watchbonus 15,000, this performance is simply unimaginable.

So when we want to achieve the function of ng-repeat and want to have performance, it can only find another way.

Ways to replace Ng-repeat

If the content is static, we do not need to bind in two ways, just to execute an assignment statement{{::value}}. If Anguluarjs is an older version below 1.3, it is a one-time binding syntax that is not supported. The best way to do this is to customize the instructions, in other words, static data can be formatted using some simple methods.

Implementation steps

1, first create an unordered list to save dynamically bound content.

Create a UL label as a container for displaying lists

We choose to dynamically load the data in the list, first add the div tag, and name it "Repeater-alternative" for the render stream.

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

2. Define 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; assigning to the $scope function

3, the actual list content

The primary purpose is to repeat the collection object and display it to the list, so you need to set the logic for the access loop and format the string as required.

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 format logic

OncecollectionObjectthe value has been assigned to another variable, you need to define the table that displays the data.

5. How to get the time to allocate Collectionobject

Angular will monitor that$scopevariables are worth changing and will be penalized once the value is modified, so you need to place the$watchCollectionObjectassignment logic$scopein the variable$watch.

The code is as follows:

$scope. $watch ($scope. Object, function (OldValue, newvalue) { 
})

That is, when we execute the assignment statement, angular handles the event and formatsListthe 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 (');
 } ';
})

The next step is to render the content in the table control, which is theHTML<DIV>repeater-alternativelabel.
First of all, we must understand the mechanism of angular, inDirectiveshort, we are to instruct the angular, when the specified variable is found, we begin to perform background operations.

var userdirectives = Angular.module ([]);

Userdirectives.directive (' Domelementfound ', function () {return
 {
  replace:true,
  link:function ($scope, $elem, attrs) {
     //Background processing Operations  }}}
);

We will notify angular that when the "repeater-alternative" element is found, the following data is rendered to 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 CLA ss= "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 are recommended to increase the performance $elem. context.innerhtml = Tabler
    ow If IE isn't your primary browser, just Appending the content to the element is enough.
   $elem. Append (TableRow);
  }); }
 }
});

Summarize

In this article, we mainly simulate the working mode and logic of ng-repeat, but only the static content, so the output result is the same as the call ng-repeat result, but the rendering is faster because the method has only one data binding way and a small amount of $watch. The above is the entire content of this article, I hope the content of this article can be helpful to everyone's study or work, if there is doubt you can message exchange.