格式化从 Laravel API 获得的 AngularJS ng-repeat 文本

Question

我有一个 Laravel 5.2 后端 API 和一个 AngularJS 前端，有时我会执行 laravel 验证，如果验证失败则返回和错误。

当我遍历错误并在前端显示它们时，我会得到这样的结果：

["The email has already been taken."]

我也想成为这样的人

The email has already been taken.

没有 [""] 的东西。

我的代码是：

角度控制器：

if (error.statusText === "Unprocessable Entity") {

          $scope.registerErrors = error.data;
}

角度模板：

<div class="alert alert-warning animated pulse" ng-if="registerError && isLoading === false">
<p ng-repeat="(error, errorText) in registerErrors">{{errorText}}</p>
</div>

Laravel 控制器：

$this->validate($request, [
          'firstname' => 'required|max:100|min:3',
          'lastname' => 'required|max:100|min:3',
          'email' => 'required|email|unique:users|max:255',
]);

控制台日志：

提前致谢！

Answer 1

因为errorText 包含email 数组，并且您显示了完整的电子邮件数组。如果电子邮件包含多个错误，那么 可以试试：

<p ng-repeat="(error, errorObject) in registerErrors">
  <span ng-repeat=" singleError in errorObject">{{singleError}}</span>
</p>

或者对于单个错误可以尝试如下：

<p ng-repeat="(error, errorText) in registerErrors">{{errorText[0]}}</p>

或者只是分配error.data.email而不是error.data

if (error.statusText === "Unprocessable Entity") {
     $scope.registerErrors = error.data.email;
}

Answer 2

其实你需要把$scope.registerErrors = error.data;改成$scope.registerErrors = error.data.email;。因为error.data.email 是一个数组。

如果同时出现多个错误，最好试试这个

if (error.statusText === "Unprocessable Entity") {
      $scope.registerErrors=[];
      if(error.data.email)$scope.registerErrors.push(error.data.email[0]);
      if(error.data.firstname)$scope.registerErrors.push(error.data.firstname[0]);
      if(error.data.lastname)$scope.registerErrors.push(error.data.lastname[0]);
}

Answer 3

工作小提琴：https://jsfiddle.net/udr9dksa/

{{emailTaken | cleanError}}

过滤器：

app.filter("cleanError", function() {
    return function(input) {
    if(!input) return "";

    return input.slice(2, -2);
  }
});