Angular JS ng-repeat显示来自JSON的数据

I am trying to display data on the front end using the ng-repeat in Angular JS . This is my JSON output

我试图在Angular JS中使用ng-repeat在前端显示数据。这是我的JSON输出

    {
"success": false,
"timestamp": 1481126855178,
"errors": [{
    "message": "Please Enter Valid Format in Beginning Time"
}, {
    "message": "Please Enter Valid Format in Ending Time"
}, {
    "message": " Please Enter only one value in d/L/P box only "
}],
"StatusList": []
}

I am trying to display the messages, inside the errors.This is my HTML Code

我试图在错误中显示消息。这是我的HTML代码

 <table>
<tr ng-repeat='item in errorsd'>
<td align="left" class="validationMsg">&nbsp;{{item.message}}</td></tr>

The Problem here is it is getting displayed like this on HTML

这里的问题是它在HTML上显示如下

     {"message":"Please Enter Valid Format in Beginning Time"}
     {"message":"Please Enter Valid Format in Ending Time"}
     {"message":" Please Enter only one value in D/L/P box only "}

I want to skip those message : part in the HTML and display the Remaining Output.I am trying to make my output like this .

我想跳过这些消息：部分在HTML中并显示剩余输出。我正在尝试使我的输出像这样。

 "Please Enter Valid Format in Beginning Time"
 "Please Enter Valid Format in Ending Time"
 " Please Enter only one value in D/L/P box only "

3 个解决方案

#1

You can directly access the message

您可以直接访问该消息

DEMO

DEMO

var app = angular.module('angularjs-starter', []);

app.controller('MainCtrl', function($scope) {
  $scope.data = {
    "success": false,
    "timestamp": 1481126855178,
    "errors": [{
      "message": "Please Enter Valid Format in Beginning Time"
    }, {
      "message": "Please Enter Valid Format in Ending Time"
    }, {
      "message": " Please Enter only one value in d/L/P box only "
    }],
    "StatusList": []
  }


});

<!DOCTYPE html>
<html ng-app="angularjs-starter">

<head lang="en">
  <meta charset="utf-8">
  <title>Custom Plunker</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
  <link rel="stylesheet" href="style.css">
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">

  <table>
    

    <tr ng-repeat="(metric, metricData) in data.errors">
      <td>{{metricData.message}}</td>
    </tr>


  </table>

</body>

</html>

#2

item.message.message would probably give you what you want, but you should figure out why the first message object is not producing the desired text in the first place.

item.message.message可能会给你你想要的东西，但你应该弄清楚为什么第一个消息对象首先没有产生所需的文本。

It looks like your error array is of type:

看起来您的错误数组类型如下：

Error[obj {message: 'msg'}, ...]

So your ng-repeat is printing the object instead of the desired property.

所以你的ng-repeat是打印对象而不是所需的属性。

#3

This is a snipped with your code. It displays the message as you want it to.

这是你的代码。它会根据您的需要显示消息。

angular.module('myapp', [])
  .controller('foo', function($scope) {

    //raw
    $scope.output = {
      "success": false,
      "timestamp": 1481126855178,
      "errors": [{
        "message": "Please Enter Valid Format in Beginning Time"
      }, {
        "message": "Please Enter Valid Format in Ending Time"
      }, {
        "message": " Please Enter only one value in d/L/P box only "
      }],
      "StatusList": []
    }

    //messages
    $scope.errorsd = $scope.output.errors;

  });

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

<div ng-app="myapp">
  <div ng-controller="foo">

    <table>
      <tr ng-repeat='item in errorsd'>
        <td align="left" class="validationMsg">&nbsp;{{item.message}}</td>
      </tr>
    </table>

  </div>
</div>

#1