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

时间:2016-12-07 16:34:00

标签: javascript angularjs json

我正在尝试使用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": []
}

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

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

这里的问题是它在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 "}

我想跳过这些消息:在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 "

2 个答案:

答案 0 :(得分:2)

您可以直接访问 message

<强>样本

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>

答案 1 :(得分:0)

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

看起来您的错误数组类型为:

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

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