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

我对许多值有一个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后端运行此代码时，第一次一切正常，但每次都没有反映出任何更改。

来源

2014-10-28 doque

你的代码是混乱给我。为什么要在每个循环的for循环中发布到服务器，并且每次都将视图绑定到它的响应？我也不明白'getObject（）'的目的是什么。 – Brett 2014-10-28 19:22:57

这个例子被简化了，但让我解释一下：'getObject'根据当前的'$ index'（以及其他值不包括在本例中）从另一个数组中检索一个对象。忍受我并忽略POST请求，你可以看到它在这里没有效果：http://jsfiddle.net/0ps2d7Lp/7/。 – doque 2014-10-28 19:25:03

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

来源

2014-10-28 19:30:14 orhanhenrik

你完全正确，将所有发生的事情从'{{obj}}'改为'{{getObject（i）}}'解决了我的问题。非常感谢！！ – doque 2014-10-28 19:37:10

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

<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

来源

2014-10-28 19:26:29

好的解决方案，但它可能有助于解释你为什么做这些改变 – orhanhenrik 2014-10-28 19:30:57

虽然这个解决方案与我提供的JS小提琴一起工作，但实际问题是我在@zizyy [回答上面]（http：// stackoverflow.com/a/26616921/548520）。 – doque 2014-10-28 19:38:30

我同意@ lzzey的解释，那就是你需要删除ng-init的原因，但是你不需要解析和字符串化。 JSON.parse（JSON.stringify（allTwo））：JSON.parse（JSON.stringify（allThree））; 相反，您可以使用angular.copy（）来打破参考数据链。 – 2014-10-28 19:45:11

在你的情况下，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. 
      } 
     }); 
    };  
}

来源

2014-10-28 19:38:47 Brett

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

回答

相关问题