【问题标题】:Angularjs : What is the best way to let Binding Data later updateAngularjs:让绑定数据稍后更新的最佳方法是什么
【发布时间】:2014-02-26 14:46:31
【问题描述】:

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

 <!-- 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 方式中,任何方法都可以不立即(单击保存按钮后)列出 1 ng-repeat 数据刷新?

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

【问题讨论】:

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


    【解决方案1】:

    您可以使用第二个(临时)克隆进行更改,然后使用 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
    

    在您的控制器中:

    /* 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.copy 上的 Angular 文档中有一个类似的示例。

    【讨论】:

    • 这正是我想要的。您的回答很有用,谢谢!
    【解决方案2】:

    您似乎是通过将数组扩展一个元素来在datas 中创建新项目?如果是这样,为什么不为表单使用不同的模型,并在单击保存按钮时将结果推送到数组data?

    类似地,在编辑项目时,克隆数组元素并使其成为结果表单的模型,然后在单击保存按钮时修改原始数组元素。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-10-09
      • 2019-10-30
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多