Question

我对角度和javascript非常新，并且熟悉php和laravel，今天我开始了一个加入这两者的小学习应用程序。我有角度显示从laravel返回给它的资源列表。我有一个文本字段，可以提交给laravel，它验证输入并将其存储在db中，angular将输入字段推送到列表中。这很好用。但是当验证失败时，输入仍然被推送到dom中的列表。我想要做的是检查服务器的响应是否有错误（以json形式返回），并且只有在没有用文本字段更新dom的情况下才会检测到。

HTML 的

<!doctype html>
<html lang="en" ng-app>
<head>
    <meta charset="UTF-8">
    <title>Loadmaster</title>
</head>
<body ng-controller="DzsController">
<h1>Dropzones</br>
    <small ng-if="open()">{{ open() }} Open</small></br>
    <small ng-if="jumping()">{{ jumping() }} Jumping Right Now!</small>
</h1>
<input type="text" placeholder="Filter dzs" ng-model="search">
<ul>

    <li ng-repeat="dz in dzs | filter:search">

        {{ dz.name }}
        <input type="checkbox" ng-model="dz.open">
        <input type="checkbox" ng-model="dz.jumping">
    </li>


</ul>

<form ng-submit="addDz()">
<input type="text" placeholder="Add a new dz" ng-model="newDzText" required>
<button type="submit">Add Task</button>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="/js/main.js"></script>

主的.js

function DzsController($scope, $http) {
    /*$scope.dzs = [
    { name: 'Perris', open: true, jumping: true },
    { name: 'Elsinore', open: false, jumping: false }
    ];*/

    $http.get('/dzs').success(function(dzs) {
        $scope.dzs = dzs;
    });

    $scope.open = function() {
        var count = 0;

        angular.forEach($scope.dzs, function(dz) {
            count += dz.open ? 1 : 0;
        });

        return count;
    };

    $scope.jumping = function() {
        var count = 0;

        angular.forEach($scope.dzs, function(dz) {
            count += dz.jumping ? 1 : 0;
        });

        return count;
    };

    $scope.addDz = function() {
        var dz = {
            name: $scope.newDzText,
            open: false,
            jumping:false
        };

        //$scope.dzs.push(dz);

        $http.post('dzs', dz);

    };
}

验证错误json

{"name":["The name field is required."]}

溶液

$scope.addDz = function() {
        var dz = {
            name: $scope.newDzText,
            open: false,
            jumping:false
        };

        $http.post('dzs', dz).success(function(data, status) {
            if(isDefined(data.errors)) {
            console.log(data.errors);
            } else {
                console.log('no validation errors');
            }
        });

    };

Answer 1

$ http返回名为“promise”的对象，该请求在请求完成时解析。

因此，您可以在返回调用后使用回调更新“dzs”列表：

$http.post('dzs', dz).success(function(data, status) {

    if (data.isValid === true) {
       $scope.dzs.push(dz);
    }
});

data.isValid === true - 当然只是一个例子 - 根据验证后得到的响应进行适当的检查。

在更新dom之前检查变量（错误）的响应

1 个答案: