Source array:

$scope.ms = [1,2,3,4];

Add another item:

 $scope.ms.push(5); $scope.$apply();

HTML output:

 <div ng-repeat="id in ms"> <span>{{id}}</span> </div>

For some reason, the pattern does not display the 4th element of the array (number 5). Are there any other ways to dynamically add elements to ng-repeat ?

  • Could tell in more detail where you are calling the code $ scope.ms.push (5); $ scope. $ apply (); - avb
  • Somehow weird you use $ apply. Then replace it with $ scope. $ Digest (); If you want to use $ apply, then it is better to rewrite the code like $ scope. $ Apply (function () {// change the array here}); - avb

2 answers 2

The correct answer : ng-repeat causes an exception in the operation, at the time of the execution of $scope.ms.push(5) , this can be seen in the browser console - [ngRepeat:dupes] . In a simple array, you need to specify a unique field, in which ng-repeat will distinguish elements from each other. For this there is a special. ng-repeat variables and parameters

 <ul> <li ng-repeat="item in ms track by $index"> {{ item }} </li> </ul>

In this case, we say - "use $index " - the index of our array. And yes, when working with $scope , $apply you do not need to use it.

Here is an example of work: https://jsbin.com/viwepocuye/edit?html,js,output

  • For the given data such an error can not be. because all the elements are unique. - Grundy
  • only at the first initialization, but when you try to add an element, an exception will be thrown, this is always the case. Therefore, I described it in the answer (in the question is an example of a dynamic array change). Therefore, a simple procedure does not work, you need to know this when working with angular. And so one example works, and the other does not. - diproart
  • one
    If you try to add element 5 to the array [1,2,3,4] - there will be no error. This is the case with the author of the question. - Grundy
  • yes, this is true; in this case, an error causes $scope.$apply - [$ rootScope: inprog]. But the reasoning and answers went "in the wrong direction." I wanted to draw attention to it and no more. - diproart

It should update all $apply itself.

Modifying the example from the local help works fine:

Template:

 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example - example-example43-production</title> <link href="style.css" rel="stylesheet" type="text/css"> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.0/angular.min.js"></script> <script src="script.js"></script> </head> <body ng-app="scopeExample"> <div class="show-scope-demo"> <div ng-controller="GreetController"> Hello {{name}}! </div> <div ng-controller="ListController"> <ol> <li ng-repeat="name in names">{{name}} from {{department}}</li> </ol> </div> </div> </body> </html>

Js:

 (function(angular) { 'use strict'; angular.module('scopeExample', []) .controller('GreetController', ['$scope', '$rootScope', function($scope, $rootScope) { $scope.name = 'World'; $rootScope.department = 'Angular'; }]) .controller('ListController', ['$scope', function($scope) { $scope.names = ['Igor', 'Misko', 'Vojta']; $scope.names.push('Another One'); //Вот здесь добавляем еще одного. }]); })(window.angular);

Online test.

  • Thank. Then from the same opera, why is it added to the array like this: $scope.messages[500] = { dialog: "534_544", from: "538", message: "sss", read: "0", time: "528852706", to: "546" }; And through $scope.messages.push(); - does not add? - Jony
  • Well, the first line simply initializes the 500th object in the array , and the second one will not add anything, there is no argument inside push(); - igumnov