Angular JS简单API：仅显示以“request”一词开头的数据

Question

我的任务是创建一个简单的AngularJS API。我有基础知识来显示数据，但它只会从请求生命的JSON文件中获取数据。因此，在低数据中，视觉显示的表格将不会显示 {{x.colour_name}}，它基本上完全忽略了它。

HTML      

   <table style="text-align:center">
  <tr ng-repeat="x in myData">
    <th>Request ID<td>{{ x.request_id }}</td></th>
    <th>Request Time<td>{{ x.request_time }}</td></th>
    <th>Request Completed<td>{{ x.request_completed }}</td></th>
    <th>Request Customer<td>{{ x.request_customer }}</td></th>
    <th>Colour name <td>{{ x.colour_name }} </td></th>
  </tr>
</table>
</div>

这是我的剧本

<script>
var app = angular.module('myApp', []);
app.controller('requestCtrl', function($scope, $http) {
  $http.get("http://www.slick-tools.com/testproject/api/v1.0/feed/data").then(function (response) {
      $scope.myData = response.data.data;
  });
});
</script>

难倒！

Answer 1

colour_name位于thread数组内的data.threads个对象中。像x.threads[0].colour_name一样访问它。

Answer 2

<table style="text-align:center">
<tr>
 <th>Request ID</th>
 <th>Request Time</th>
 <th>Request Completed</th>
 <th>Request Customer</th>
 <th>Colour name </th> 
</tr> 
<tr ng-repeat="x in myData">
<td>{{ x.request_id }}</td>
<td>{{ x.request_time }}</td>
<td>{{ x.request_completed }}</td>
<td>{{ x.request_customer }}</td>
 <td><p ng-repeat="thread in x.threads">{{ thread.colour_name }}</p> </td>
</tr>
</table>

试试这个..这可能有帮助

Answer 3

HTML

<table style="text-align:center">
  <tr ng-repeat="x in myData track by $index">
    <th>Request ID<td>{{ x.request_id }}</td></th>
    <th>Request Time<td>{{ x.request_time }}</td></th>
    <th>Request Completed<td>{{ x.request_completed }}</td></th>
    <th>Request Customer<td>{{ x.request_customer }}</td></th>
    <th>Colour name <td><span ng-repeat="c in x.threads track by $index">{{ c.colour_name }}, </span> </td></th>
  </tr>
</table>
</div>

控制器

var app = angular.module('myApp', []);
app.controller('requestCtrl', function($scope, $http) {
  $http.get("http://www.slick-tools.com/testproject/api/v1.0/feed/data").then(function (response) {
      $scope.myData = response.data;
  });
});

Answer 4

看一下这个plunker，在这里处理多种颜色：

    <td><p ng-repeat="thread in x.threads">{{ thread.colour_name }}</p></td>

表格看起来像这样：