如何使用角度渲染特定数据?

时间:2017-04-21 06:39:42

标签: javascript angularjs

我对Angular很新,我已经设法到达这里:

 <tr ng-repeat="spec in res">
     <td> {{$index + 1}} </td>
     <td>{{ spec }}</td>             
 </tr>

目前,我的输出是:

[["suite1",{"id":"suite1","description":"test cases","fullName":"my cases","failedExpectations":[],"status":"finished","specs":[{"id":"spec0","description":"should be able to add an unit","fullName":"etc cases","failedExpectations":[],"passedExpectations":[],"pendingReason":"","status":"passed"}]},"timestamp: Thu Apr 20 2017 09:47:38 GMT+0300 (EEST)"]]

如何显示特定字段? (例如ID。或描述。或全名?

编辑:我正在使用Angular 1.6.3。

EDIT2:

json结果

 <pre>{{ res | json }}</pre>

结果在这里

[
  "[[\"suite1\",{\"id\":\"suite1\",\"description\":\"test cases\",\"fullName\":\"my cases\",\"failedExpectations\":[],\"status\":\"finished\",\"specs\":[{\"id\":\"spec0\",\"description\":\"should be able to create a room\",\"fullName\":\"should be able to add an unit\",\"failedExpectations\":[],\"passedExpectations\":[],\"pendingReason\":\"\",\"status\":\"passed\"}]},\"timestamp: Thu Apr 20 2017 09:47:38 GMT+0300 (EEST)\"]]"
]

我还创建了一个将数组转换为对象的小函数:

function toObject(arr) {
       let rv = {};
        for (let i = 0; i < arr.length; ++i)
             if (arr[i] !== undefined) rv[i] = arr[i];
        return rv;
        }

    console.log(toObject(events));
    $scope.res = toObject(events); 

    $scope.res = toObject(events); 

没有区别

这将数据翻译成:

Object {0: "[["suite1",{"id":"suite1","description":"RW - rate…tamp: Fri Apr 21 2017 11:45:06 GMT+0300 (EEST)"]]", 1: "[["suite1",{"id":"suite1","description":"rates","f…tamp: Fri Apr 21 2017 11:45:55 GMT+0300 (EEST)"]]", 2: "[["suite1",{"id":"suite1","description":"rates","f…tamp: Fri Apr 21 2017 11:46:12 GMT+0300 (EEST)"]]"}

3 个答案:

答案 0 :(得分:1)

enter image description here以下是Jsfiddle link

的解决方案

updated jsfiddle link

JS代码

  var app = angular.module('myApp', []);

  app.controller('ctrl', function($scope) {
    $scope.res = [
      ["suite1", {
        "id": "suite1",
        "description": "test cases",
        "fullName": "my cases",
        "failedExpectations": [],
        "status": "finished",
        "specs": [{
          "id": "spec0",
          "description": "should be able to add an unit",
          "fullName": "etc cases",
          "failedExpectations": [],
          "passedExpectations": [],
          "pendingReason": "",
          "status": "passed"
        }]
      }, "timestamp: Thu Apr 20 2017 09:47:38 GMT+0300 (EEST)"]
    ];
  });

<强> HTML

  <div ng-app='myApp' ng-controller='ctrl'>
    <table border='1'>
      <tr>
        <th>
          ID
        </th>
        <th>Full Name
        </th>
      </tr>
      <tr ng-repeat="spec in res">
        <td> {{$index + 1}} </td>
        <td>{{ spec[1].fullName }}</td>
      </tr>

    </table>
  </div>

希望这会对你有所帮助

答案 1 :(得分:0)

因为这是一个多维数组,所以你需要使用嵌套的ng-repeats

 <table>

  <tr ng-repeat="spec in res track by $index">
     <td>
     <table> 
      <tr ng-repeat="spe in spec track by $index">
         <td>{{ spe.id }}</td>    
         <td>{{ spe.fullName }}</td>             
     </tr>
     </table>
     </td>           
 </tr>
 </table>

angular.module("app",[])
.controller("ctrl",function($scope){
$scope.res = [["suite1",{"id":"suite1","description":"test cases","fullName":"my cases","failedExpectations":[],"status":"finished","specs":[{"id":"spec0","description":"should be able to add an unit","fullName":"etc cases","failedExpectations":[],"passedExpectations":[],"pendingReason":"","status":"passed"}]},"timestamp: Thu Apr 20 2017 09:47:38 GMT+0300 (EEST)"]]


})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
 <table>
 
  <tr ng-repeat="spec in res">
     <td>
     <table> 
      <tr ng-repeat="spe in spec">
         <td>{{ spe.id }}</td>    
         <td>{{ spe.fullName }}</td>             
     </tr>
     </table>
     </td>           
 </tr>
 </table>
</div>

答案 2 :(得分:0)

 <tr ng-repeat="spec in res">
 <td>{{:: $index + 1}} </td>
 <td>{{:: spec }}</td>  
 <td>{{:: spec.ID }}</td>             
 <td>{{::spec.fullName }}</td>