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 to show my problem，它只会模仿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);
        }
    });
};

指向您的更新小提琴的链接是here

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.
            }
        });
    };    
}

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

3 个答案: