将$ http响应分配给$ scope时，AngularJS视图不会更新

Question

我有许多值的ng-repeat循环。 循环时，我从另一个值数组中获取变量，并使用该变量：

<div ng-repeat="i in [1,2,3]">
    <div ng-init="obj = getObject(i)">
        <pre>{{ obj }} </pre>
    </div>
</div>

我现在的目标是更改该变量的属性，并执行包含更新后的变量的POST请求。 然后，来自服务器的响应包含所有值，我将这些值绑定到$ scope以便更新视图。

<a ng-click="change(obj, 5)">Set property to 5</a>

$scope.change = function(o, value) {
    o.prop = value;
    // save() sends a POST requests and returns a JSON with all values
    $scope.values = save(o);
}

这行得通，但是只有我第一次这样做 。 所有其他更改将反映在$ scope.variables中，但不会反映在模板的{{ obj }}变量中。 $scope.$apply()也无效。

我创建了一个JS Fiddle来展示我的问题 ，该问题仅模拟HTTP请求。 但是，我发现即使在REST后端上运行此代码时，第一次一切都很好，但是之后的任何时间都完全没有变化。

Answer 1

我已经对您的小提琴进行了更改。

<div ng-repeat="i in [1,2,3]">
   <div>
     <pre>{{ getObject(i) }} </pre>
   </div>
</div>

控制器变更：

$scope.changeType = function(ids, type) {
    angular.forEach($scope.objects, function(o) {
        if (ids.indexOf(o.id) > -1) {
            o.type = type;   
            var response = (type === 2) ? allTwo : allThree

            $scope.objects = angular.copy(response);
        }
    });
};

链接到您更新的小提琴在这里

Answer 2

我认为是由于您使用的是ng-init ，这可能是因为您正在调用函数而设置了不变的值。 一旦将{{ obj }}更改为{{ getObject(i) }} ，它将起作用。 唯一的问题是，由于直接分配变量，因此脚本中的allTwo和allThree也正在被引用和修改。 我通过克隆对象来解决此问题，但是在使用AJAX时可能不会成为问题。 这是您的提琴的更新版本： http : //jsfiddle.net/0ps2d7Lp/6/

Answer 3

在您的情况下， getObject()是必需的，但为简单起见，我在答案中将其排除在外。 我知道您需要执行PUT / POST请求以更新服务器端的对象，但是我认为根本没有必要将视图重新绑定到服务器的响应。 从根本上讲，在大多数情况下，PUT除了200 OK不需要其他响应。 关键是要告诉服务器更新对象，而不是创建对象。 因此，主键没有变化，因此，您无需重新绑定对象。 更改已驻留在内存中。

HTML

<div class="example" ng-controller="MyCtrl">       
    <div ng-repeat="obj in objects">
        <div><pre>{{ obj }}</pre></div>
    </div>
    <a href="#" ng-click="changeType([1,2,3], 2)">Change all to Type 2</a>
    <a href="#" ng-click="changeType([1,2,3], 3)">Change all to Type 3</a>
</div>

JavaScript的

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    // initial objects
    $scope.objects = [
        { id: 1, type: 1 },
        { id: 2, type: 2 },
        { id: 3, type: 3 }
    ];

    $scope.changeType = function(ids, type) {
        angular.forEach($scope.objects, function(o) {
            if (ids.indexOf(o.id) > -1) {
                o.type = type;
                // Perform your PUT/POST request here for each
                // updated object to update it on the server-side.
                // There is no need to bind to a server response.
            }
        });
    };    
}