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

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

我认为有以下代码:

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

我想要 ng-repeat当从 items 添加/删除新值时动态触发.就像,如果一个新元素被添加到 items 的开头那么它应该在开始时动态呈现给 DOM,如果一个元素被添加到 items 的末尾,类似地该项目应呈现为最后一个列表项。 DOM 的这种动态变化是否可能有 Angular ?

最佳答案

ng-repeat 应该开箱即用。但是,您需要将 pushunshift 放入数组中,以便正确的 watch 触发。 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');
    }
  });

关于javascript - 在 DOM 中动态重新加载 ng-repeat 数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19952950/

相关文章:

javascript - ng-repeat 不使用 track by 更新模型

javascript - 选择框的 Angular 不可变数组

javascript - 如何使用选择和按钮创建指令

javascript - AngularJS 嵌套 ng-repeat

javascript - AngularJS - 多次 ng-click - 事件冒泡

javascript - AngularJS =?绑定(bind)不更新

javascript - 如何在 ASP.Net MVC 应用程序中获取客户端时区

javascript - AngularJS 中未知数量输入的设置值

javascript - Angular 5 - 如何重定向到具有特定 header 的外部 URL?

javascript - 用于查询更新的 Firestore 文档 ID