2017-04-21 63 views
0

我是很新的角度,我已經成功地到達這裏:如何使用角度呈現特定數據?

<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或描述或全名

編輯:這裏

JSON結果

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

結果:我使用的角度1.6.3

EDIT2。

[ 
    "[[\"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)"]]"} 

回答

1

enter image description here這裏是它Jsfiddle link

updated jsfiddle link

j中的溶液S碼

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> 

希望這將幫助你

+0

沒有任何東西被渲染,除了索引計數器。 –

+0

結帳上傳的圖片 –

+0

我有一個額外的「在$ scope.res,請參閱編輯的json輸出 –

0

,因爲這是一個你需要使用多維數組nested 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>

+0

沒有獲取與所提到的代碼 –

+0

看到演示呈現! –

+0

錯誤:[ngRepeat:dupes]不允許在中繼器中複製。使用'track by'表達式來指定唯一鍵。中繼器:規格中的spe,重複鍵:字符串:[,重複值:[ –

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

+0

索引計數器和規範得到呈現(就像上面舉例說明的那樣,ID和fullName沒有。 –