angularjs ng-repeat

Time:2020-10-26

Data to loop

$scope.friends = [
    {name:'John', age:25, gender:'boy'},
    {name:'Jessie', age:30, gender:'girl'},
    {name:'Johanna', age:28, gender:'girl'},
    {name:'Joy', age:15, gender:'girl'},
    {name:'Mary', age:28, gender:'girl'},
    {name:'Peter', age:95, gender:'boy'},
    {name:'Sebastian', age:50, gender:'boy'},
    {name:'Erika', age:27, gender:'girl'},
    {name:'Patrick', age:40, gender:'boy'},
    {name:'Samantha', age:60, gender:'girl'}
  ];

1、 Definition and usage

The ng repeat instruction is used to loop out HTML elements for a specified number of times.
Collection must be an array or an object.

2、 Syntax and parameter values

1. Grammar

<element ng-repeat="expression"></element>

All HTML elements support this directive.

2. Parameter value

(1) , expression is array loop: X in records

Use array loop to output a table:

<table ng-controller="myCtrl" border="1">
    <tr ng-repeat="x in records">
        <td>{{x.Name}}</td>
        <td>{{x.Country}}</td> 
    </tr>
</table>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.records = [
       {
            "Name" : "Alfreds Futterkiste",
            "Country" : "Germany"
        },{
            "Name" : "Berglunds snabbköp",
            "Country" : "Sweden"
        },{
            "Name" : "Centro comercial Moctezuma",
            "Country" : "Mexico"
        },{
            "Name" : "Ernst Handel",
            "Country" : "Austria"
        }
    ]
});
</script>
(2) , expression is the object loop: (key, value) in myobj

Use the object loop to output a table:

<table ng-controller="myCtrl" border="1">
    <tr ng-repeat="(x, y) in myObj">
        <td>{{x}}</td>
        <td>{{y}}</td> 
    </tr>
</table>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.myObj = {
        "Name" : "Alfreds Futterkiste",
        "Country" : "Germany",
        "City" : "Berlin"
    }
});
</script>
(3) , other parameter values

Item in items track by $ID (item) is equivalent to item in items
Ng repeat will add a $$hashkey to each element to identify each element. When we retrieve data from the back end, even if the data is exactly the same, because the hashkeys are different, angular will delete all previous DOMS and regenerate new DOMS. In this way, the efficiency will be greatly reduced. It can be understood that ng repeat is track by $hashkey by default. So, we should use something that doesn’t change, such as the ID of the back-end data

item in items track by item.id
In this way, when retrieving data, because the ID does not change, angular will not delete the original DOM, only the contents of it will be updated, and different IDS will add new dom. Efficiency can be improved. This is equivalent to the function of data-reactive in real, so that the angular is not slower than react.

item in items track by $index
Loop by index variable $Index

3、 Ng repeat and (ng repeat start, ng repeat end)

Ng repeat and (ng repeat start, ng repeat end) both loop one item, the difference is ng repeat start, ng repeat end can span multiple tags, and ng repeat can only loop in one tag!

  <header ng-repeat-start="friend in friends">
    Header {{ friend.name }}
  </header>
  <div class="body">
    Body {{ friend.age }}
  </div>
  <footer ng-repeat-end>
    Footer {{ friend.gender }}
    <hr>
  </footer>

angularjs ng-repeat

4、 Special variables

Several variables are provided in ng repeat to provide quick operation for developers,

$index: represents the index of the current item,
$first: if item is the first, then $first is true,
$middle: if item is not the beginning and not the end, then $middle is true,
$last: if item is the last, then $last is true,
$even: if the index is even, then $even is true,
$odd: if the index is odd, then $odd is true

5、 Example of official website

Item in items | filter: X as results

I have {{friends.length}} friends. They are:
  <input type="search" ng-model="q" placeholder="filter friends..."  />
  <ul class="example-animate-container">
    <li class="animate-repeat" ng-repeat="friend in friends | filter:q as results">
      [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
    </li>
    <li class="animate-repeat" ng-if="results.length === 0">
      <strong>No results found...</strong>
    </li>
  </ul>

6、 Attention

1, if the array to loop is like this$ scope.dataList = [1,2,1];

Will report a mistake
Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: user in users, Duplicate key: number:1。

This is because ng repeat does not allow two objects with the same ID in the collection.

For a basic data type such as a number or string, its ID is its own value. Therefore, two identical numbers are not allowed in an array. To avoid this error, you need to define your own track by expression.

If it’s JavaScript object type data, ng repeat doesn’t think it’s the same object even if the content is the same.
If$ scope.dataList =[{“age”: 10}, {age: 10}];, then no error will be reported.

2. Be careful to use $index as the basis for adding, deleting, and modifying data. As the value of index has changed after filtering by filter, it will cause errors. It is better to directly take the item object to add, delete, modify and query data!
Reference from:http://blog.csdn.net/renfufei…

3. Track by must be placed after orderby, otherwise it will affect the effect of orderby.

Reference articles:
https://docs.angularjs.org/ap…
http://www.tuicool.com/articl…

Recommended Today

Stack chain storage

Linked list implementation stack Create three files: stacklinked. H, stacklinked. C, stacklinkedtest. C stackLinked.h #ifndef STACK_LINKED_H_ #define STACK_LINKED_H_ #ifdef __GNUC__ #define DEPRECATED __attribute__( (deprecated) ) #elif defined(_MSC_VER) #define DEPRECATED __declspec( deprecated ) #else #define DEPRECATED #endif #ifndef PTOI #define PTOI( p ) ((int32_t)(int64_t)(p)) #endif #ifndef ITOP #define ITOP( i ) ((void *)(int64_t)(i)) #endif #define ADT […]