Question

我正在将一个对象传递给一个资源，该资源会进行一些数据库更新，这些更新可能会更改对象的多个属性（超出UI中所做的更改）。

如果我单独更新属性，则更改会反映在HTML中。但是，如果我尝试更新整个对象，则不会反映更改。

所以，这有效：

myResource.doSomething(item)
    .$promise
    .then(function (response) {
        item.Color = response.Result.Color;
        item.Shape = response.Result.Shape;
    });

但这不是：

myResource.doSomething(item)
    .$promise
    .then(function (response) {
        item = response.Result;
    });

更新对象的每个属性的最佳方法是什么？

如果它有帮助，这是我的资源（发布到MVC控制器，它返回更新对象的JSON）：

app.factory('myResource', function ($resource) {
    return {
        doSomething: function (item) {
            return $resource('/Something/Do/:Id', { Id: item.Id }).save();
        }
    };
});`

编辑：为了澄清，该项目是绑定到ng-repeat指令的集合的一部分，例如：

<tr ng-repeat="item in items" >
    <td>
        <a ng-click="doSomething(item)" >Do Something</a>
    </td>
</tr>

Answer 1

这不起作用的原因：

myResource.doSomething(item)
    .$promise
    .then(function (response) {
        item = response.Result;
    });

是因为您实际上在做的是覆盖名为item的本地变量。

由于您还没有显示控制器/组件代码，因此我不确切知道您的商品列表是如何填写的，但是让我告诉您它应该如何与评论一起使用，希望您能理解就这样:)）

＆＃13;

angular
  .module("app", [])
  .controller("myController", function($timeout, myResource) {
    var _this = this;
    _this.loadingItems = true;
 
    // Fake loading the items
    $timeout(function() {
      _this.items = [
        { "Id": 1, "Name": "Some Name" },
        { "Id": 2, "Name": "Other Name" },
        { "Id": 3, "Name": "Yet another Name" },
        { "Id": 4, "Name": "Final Name" },
      ];
      _this.loadingItems = false;
    }, 500);
    
    _this.doSomething = function(item) {
        item.sending = true;
       myResource.doSomething(item)
        .then(function(newItem) {
          // Here's where the magic happens
          // First find where the existing items is at in the array
          var existingIndex = _this.items.indexOf(item);
          // Replace the item with the one from the server
          _this.items.splice(existingIndex, 1, newItem);
        });
    }
    
  })
  .factory('myResource', function ($timeout) {
    return {
        doSomething: function (item) {
            // Fake sending something to the server which returns a new Item object
            return $timeout(function() {
               return { Id: item.Id, "Name": "New name returned by server!" };
            }, 250);
        }
    };
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

<div ng-app="app">

  <!-- Notice the 'as vm' on the controller to put the controller on the scope as 'vm' -->
  <div ng-controller="myController as vm">
    <p ng-if="vm.loadingItems">Busy loading items</p>
    
    <table ng-if="!vm.loadingItems">
      <tr ng-repeat="item in vm.items track by item.Id">
        <td>
          {{item.Name}}
        </td>
        <td>
          <a href="javascript:void(0);" ng-if="!item.sending" ng-click="vm.doSomething(item)">Do Something</a>
          <span ng-if="item.sending">Working...<span>
        </td>
      </tr>
    </table>

  </div>

</div>

＆＃13;

我真的希望这会有所帮助！否则我花了太多时间输入：）

Angular - 资源保存后更新对象的每个属性

1 个答案: