javascript - 以一种绑定(bind) ng-repeat 的方式重新渲染数据

我在 ng-repeat 中使用单向绑定(bind)。我仍然想在数组值更改时刷新 ng-repeat 。

请提出您的想法:

示例:

<html ng-app="todoApp">

<head>
  <title>
    TO DO List
  </title>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/readable/bootstrap.min.css">
  <link rel="stylesheet" href="style.css">
  <script data-require="angular.js@*" data-semver="1.3.1" src="//code.angularjs.org/1.3.1/angular.js">
  </script>
  <script>
    var todoApp = angular.module("todoApp", []).config(function($compileProvider, $httpProvider) {
      $compileProvider.debugInfoEnabled(true);
    });

    todoApp.controller("ToDoCtrl", function($scope) {

      $scope.data = [12, 23, 45, 67, 89];
      $scope.add = function(dtata) {
        $scope.data.push(dtata);
      }
    });
  </script>

</head>

<body ng-controller="ToDoCtrl">

  <!-- ...elements omitted for brevity... -->

  <div class="panel">
    <div class="input-group">
      <input class="form-control" />
      <input type="text" ng-model="numberData" />
      <button type="submit" ng-click="add(numberData)">
        add
      </button>
    </div>
    <table class="table table-striped">
      <thead>
        <tr>
          <th>
            Numbers
          </th>
        </tr>
        <tr ng-repeat="de in ::data">
          <th>
            {{::de}}
          </th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
</body>

</html>

代码可以在Plnkr处找到。

最佳答案

使用“::”语法用于一次性绑定(bind)，不应与单向绑定(bind)相混淆。 ng-repeat 本质上是一种方式。也就是说，添加dom元素并不会神奇地将数据项添加到模型中。一次性绑定(bind)的真正目的是通过明确声明用于渲染的数据不会改变(或者如果改变了，我们也不会关心)来提高 Angular 的摘要循环的性能。

话虽如此，您可以从 {{::de}} 中删除 :: 以消除检查每个元素是否发生更改的开销。如果数据变得非常大，这将避免性能下降。

关于javascript - 以一种绑定(bind) ng-repeat 的方式重新渲染数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29828705/