问题在DOM中动态重新加载ng-repeat数据

我在视图中有以下代码：

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

我想要的 ng-repeat 在添加/删除新值时动态触发 items。如同，如果添加一个新元素开始 items 那么它应该在开始时动态地呈现给DOM，并且类似地如果元素被添加到结尾 items 该项应该呈现为最后一个列表项。 DOM的这种动态变化是否有可能？

1481

2017-11-13 11:45

起源

是的，应该开箱即用。只要确保 push 和 unshift 进入现有阵列。 Angular将通过引用进行跟踪。 - Davin Tryon

由于angular js提供运行时数据绑定，因此更新后的任何范围值都会导致apply（）dom UI，您可以在此处看到它 docs.angularjs.org/api/ng.directive:ngController - Vinod Louis

答案:

ng-repeat 应该这样开箱即用。但是，你需要 push 要么 unshift 进入阵列，以便正确的手表射击。 Angular将通过引用跟踪数组。

这里有一个工作的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');
    }
  });

2017-11-13 11:52

谢谢，但附加一个元素的setTimeOut似乎没有动态地将它附加到列表中。 - Amal Antony

你必须使用 $timeout 角度服务或 $scope.$apply 触发角度 $digest。 - Davin Tryon

我已经更新了plunker以显示 $timeout。 - Davin Tryon

我最初使用setTimeout测试ng-repeat，这促使我提出问题。谢谢你的帮助。 - Amal Antony

啊哈，这是一个很好的提示。所以用['item1'，'item2']等替换整个$ scope.data.array不会自动更新视图。使用$ scope。$ apply closure（有关详细信息，请参阅此处： jimhoskins.com/2012/12/17/angularjs-and-apply.html）让角度知道某些东西在它看到的东西之外更新了，显然。 - Michael Trouw

您可以使用$ scope的$ rootScope intead来设置属性项。

这样，该属性是全局的，将会更新。

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

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

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

2017-10-02 13:55

问题 在DOM中动态重新加载ng-repeat数据

答案:

热门问题

问题在DOM中动态重新加载ng-repeat数据