javascript - Angular js : What is the best way to let Binding Data later update

标签 javascript angularjs angularjs-directive angularjs-ng-repeat

如果我有一个 ng-repeat 指令与我的初始数据绑定(bind),

 <!-- list 1-->
 <li ng-repeat="data in datas">{{data.name}}</li>

我通过另一个 ng-repeat 和 ng-model 指令更改数据,

 <!-- list 2-->
 <li ng-repeat="data in datas">
     <input type="text" ng-model="data.name">
 </li>

在 Angular 方式中,任何方法都可以不立即执行 list 1 ng-repeat 数据刷新(在我单击“保存”按钮后)?

<button ng-click="save()">Save</button>

最佳答案

您可以使用第二个(临时)克隆进行更改,并使用 angular.copy 将更改复制到实际对象。

The actual list:
<ul><li ng-repeat="item in items">
    {{item.name}} (id: {{item.id}})
</li></ul>

Edit the list:
<ul><li ng-repeat="item in tempCopy">
    <input type="text" ng-model="item.name" />
</li></ul>

<button ng-click="persistChanges()">Save</button>
<button ng-click="discardChanges()">Discard</button

在你的 Controller 中:

/* Persist the changes */
$scope.persistChanges  = function () {
    angular.copy($scope.model.tempCopy, $scope.model.items);
};
/* Discard the changes */
$scope.discardChanges  = function () {
    angular.copy($scope.model.items, $scope.model.tempCopy);
};

另请参阅此 short demo

最后,Angular 文档上有一个类似的示例 angular.copy

关于javascript - Angular js : What is the best way to let Binding Data later update,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21279144/

相关文章:

javascript - Angular Js - 打印具有特定键的数组

javascript - 从指令链接函数观察 Controller 范围

javascript - 如何循环检查 p 元素是否为空的条件?

javascript - 为什么在 setInterval 循环之外找不到这个函数? (javascript)

javascript - 根据用户鼠标是否在 iframe 窗口上方转义 iframe

javascript - 如何使用 Angular.js 添加/删除 onClick 列表项?

javascript - 何时以及为何使用 &?、=?、@?在 AngularJS 中?

javascript - 重定向时的 Rack-CORS 错误

javascript - 限制 HTML5 textarea 中的行数

twitter-bootstrap - 将 angular2 表单指令应用于自定义输入表单元素