Question

我正在尝试使用Angular创建一个简单的表单，并且需要呈现服务器端验证错误。我们的REST API使用422状态代码和响应正文中的JSON错误数组处理验证错误。

我的控制器：

.controller('MyController, function($scope, $http) {
  $scope.save = function() {
    var promise = $http.post('http://myapi.net/resources', $scope.data)
      .success(function(data) {
        // Success
      })
      .error(function(data, status) {
        $scope.errors = data.errors;
      });
    $scope.errors = [];
    return promise;
  };
});

我的模板：

<span ng-repeat="e in errors" class="error">
    {{e.field}} - {{e.message}}
</span>

第一次POST后错误呈现错误，但如果第二次POST失败，服务器发送的错误将附加到DOM中。之前的一批错误仍然存在，似乎没有对数据进行任何改进。单步执行代码，$ scope变量具有正确的数据，但DOM没有。有没有办法强制ng-repeat销毁所有以前的DOM并构建新的DOM？或者有更好的方法来调试这个，以便我可以看到发生了什么？

Answer 1

正如@tymeJV所说它应该有效。如何使用空数组重置错误数组：

myApp.controller('MyController', function($scope, $http) {
  $scope.save = function() {

    // always a good idea
    $scope.errors = [];
    // ...
});

Here's also a plunk, maybe you can recreate it there.

Answer 2

好吧，我不知道ng-repeat会发生什么，但是2天后我发现了一种解决方法。使用第二个范围变量和手表似乎恢复了正确的行为：

.controller('MyController, function($scope, $http) {
  $scope._errors = [];
  $scope.$watch('_errors', function(val) {
    $scope.errors = val;
  });

  $scope.save = function() {
    var promise = $http.post('http://myapi.net/resources', $scope.data)
      .success(function(data) {
        // Success
      })
      .error(function(data, status) {
        $scope._errors = data.errors;
      });
    $scope.errors = [];
    return promise;
  };
});

为什么这在成功回调中没有必要超出我的范围，但你去了。

Angular ng-repeat在连续的$ http调用中追加而不是替换DOM元素

2 个答案: