在 DOM 中动态重新加载 ng-repeat 数据答案

【问题标题】：Dynamically reloading ng-repeat data in the DOM在 DOM 中动态重新加载 ng-repeat 数据
【发布时间】：2013-11-26 00:07:33
【问题描述】：

我认为有以下代码：

<li ng-repeat="i in items">{{i.id}}</li>

我希望在从items 添加/删除新值时动态触发ng-repeat。如，如果一个新元素被添加到 items 的开头，那么它应该在开始时动态呈现到 DOM，类似地，如果一个元素被添加到 items 的末尾，则该项目应该作为最后一个呈现项目清单。 DOM 的这种动态变化是否可能在角度上进行？

【问题讨论】：

是的，应该以这种方式开箱即用。只需确保将push 和unshift 放入现有数组即可。 Angular 将通过引用进行跟踪。
由于 Angular js 提供运行时数据绑定，因此更新时任何范围值都会导致 apply() dom UI，您可以在此处看到它docs.angularjs.org/api/ng.directive:ngController

标签： javascript angularjs angularjs-ng-repeat angular-ui

【解决方案1】：

您可以使用 $rootScope 而不是 $scope 来设置属性项。

这样属性是全局的并且会被更新。

myApp.controller('Ctrl', function($scope, $rootScope) {

    $rootScope.items = ['hi', 'hey', 'hello'];

    $scope.add = function() {
        $rootScope.items.push('wazzzup');
    }
});

【讨论】：

【解决方案2】：

ng-repeat 应该开箱即用。但是，您需要将push 或unshift 放入数组中，以便触发正确的手表。 Angular 将通过引用来跟踪数组。

这是working plunker。

HTML：

<html ng-app="myApp">

  <head>
    <script data-require="angular.js@*" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="Ctrl">
    <h1>Hello Plunker!</h1>
    <div ng-repeat="item in items">
      {{ item }}
    </div>
    <button ng-click="add()">Add</button>
  </body>

</html>

JS：

var myApp = angular.module('myApp', []);

myApp.controller('Ctrl', function($scope) {

    $scope.items = ['hi', 'hey', 'hello'];

    $scope.add = function() {

      $scope.items.push('wazzzup');
    }
  });

【讨论】：

谢谢，但附加元素的 setTimeOut 似乎不会动态地将其附加到列表中。
您必须使用$timeout angular service 或$scope.$apply 来触发angular $digest。
我最初是在使用 setTimeout 测试 ng-repeat，这促使我提出这个问题。感谢您的帮助。
啊哈，这是一个很好的提示。所以用 ['item1', 'item2'] 等替换整个 $scope.data.array 不会自动更新视图。使用 $scope.$apply 闭包（有关更多信息，请参阅此内容：jimhoskins.com/2012/12/17/angularjs-and-apply.html）让 Angular 知道某些内容在它所监视的内容之外已更新，显然。
如何确保项目排在列表顶部？我有一个问题，项目被添加到我的视图底部，但是在我的数组中我把它放在数组的开头