無法循環通過ng-repeat內的字符串數組

我有一個從servlet返回的Java對象，我將其轉換爲JSON並作爲範圍變量反饋給角度顯示。無法循環通過ng-repeat內的字符串數組

這個Java對象和一些字符串變量都有一個字符串數組。

這是JSON的樣子：（下面的JSON存儲在$ scope.detail）

{"details": 
{"0":{"Var1":"val1","Var2":"val2","Arr1":["0","0","2",null,null,null]}, 
{"1":{"Var1":"val1","Var2":"val2","Arr1":["0","0","2",null,null,null]} 
}

我能夠成功地遍歷採用NG-重複除「ARR1」的項目。網站上的一些回覆顯示，我應該能夠使用另一個ng-repeat進行迭代，但下面的內容對我無效。請建議。謝謝。

<table ng-repeat="item in detail.details"> 
    <tr> 
     <td>item.Var1</td> 
     <td>item.Var2</td> 
     <td> 
      <div ng-repeat="val in item.Arr1"> 
        {{val}} 
      </div> 
     </td> 
    </tr> 
</table>

來源

2017-04-13 user4923462

您的JSON似乎並不正確。檢查它是否有效。 –

這是無效的 - http://jsonlint.com/ – reedb89

Arr1中有重複。嘗試'ng-repeat =「在item.Arr1中的val按$ index」' –

您提供的JSON不是有效的JSON。用最少的修改，我會建議重新格式化它看起來是這樣的：

{ 
    "details": [ 
    { 
     "Var1":"val1","Var2":"val2","Arr1":["0","0","2",null,null,null] 
    }, 
    { 
     "Var1":"val1","Var2":"val2","Arr1":["0","0","2",null,null,null] 
     } 
    ] 
}

雖然這是目前有效的JSON，我仍然認爲你應該考慮重新格式化JSON更容易地被消耗它AngularJS應用程序。

這裏是一個Plunker來說明一個解決方案。

來源

2017-04-13 01:16:02

謝謝大家。這真的幫助我專注於JSON而不是迭代的角度語法。我的錯誤在於，爲了清除空值的servlet響應，我終結了JSON格式。一旦我清除了它就像一個魅力。 Plunker對我的JSONs非常有幫助。謝謝Ben Beck。 – user4923462

@ user4923462，不客氣:) –

檢查你的JSON，它是無效的。您的詳細資料對象的第二個屬性沒有結構良好的檢查{和}，它們沒有正確放置。

您可以使用https://jsonformatter.curiousconcept.com/調整你的JSON和錯誤

下面的檢查校正JSON：

{ 
    "details":{ 
     "0":{ 
     "Var1":"val1", 
     "Var2":"val2", 
     "Arr1":[ 
      "0", 
      "0", 
      "2", 
      null, 
      null, 
      null 
     ] 
     }, 
     "1":{ 
     "Var1":"val1", 
     "Var2":"val2", 
     "Arr1":[ 
      "0", 
      "0", 
      "2", 
      null, 
      null, 
      null 
     ] 
     } 
    } 
}

你的HTML縫好了，只需添加track by $index和打印item.Var1和item.Var2使用插值運算符

<table ng-repeat="item in detail.details"> 
    <tr> 
     <td>{{item.Var1}}</td> 
     <td>{{item.Var2}}</td> 
     <td> 
     <div ng-repeat="val in item.Arr1 track by $index"> 
      {{val}} 
     </div> 
     </td> 
    </tr> 
</table>

我希望這可以幫助

來源

2017-04-13 04:37:13

一些意見，按您的代碼：

你JSON無效

它的結構應是這樣：
使用ng-repeat="(key,val) in detail.details"代替ng-repeat="item in detail.details"作爲detail.details是一個對象不是一個數組。

DEMO

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

 
myApp.controller('MyCtrl', function($scope) { 
 
    $scope.detail = { 
 
\t "details": { 
 
\t \t "0": { 
 
\t \t \t "Var1": "val1", 
 
\t \t \t "Var2": "val2", 
 
\t \t \t "Arr1": ["0", "0", "2", null, null, null] 
 
\t \t }, 
 
\t \t "1": { 
 
\t \t \t "Var1": "val1", 
 
\t \t \t "Var2": "val2", 
 
\t \t \t "Arr1": ["0", "0", "2", null, null, null] 
 
\t \t } 
 
\t } 
 
}; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 
    <table ng-repeat="(key,val) in detail.details"> 
 
    <tr> 
 
     <td>{{val.Var1}}</td> 
 
     <td>{{val.Var2}}</td> 
 
     <td> 
 
      <div ng-repeat="item in val.Arr1"> 
 
        {{item}} 
 
      </div> 
 
     </td> 
 
    </tr> 
 
</table> 
 
</div>

來源

2017-04-13 09:17:16

無法循環通過ng-repeat內的字符串數組

回答

相關問題