2014-10-10 93 views
1

我有這樣的代碼:NG重複不工作的JSON值

<tr ng-repeat="tagJson in tagList"> 
    <div ng-repeat="(key, value) in tagJson"> 
     <td width="48%" ng-class-odd="'evn'" ng-class-even="'odd'"> 
      {{key}} 
     </td> 
     <td width="48%" ng-class-odd="'evn'" ng-class-even="'odd'"> 
      {{value}} 
     </td> 
    </div> 
</tr> 

其中tagList是:

[{a:1},{a:1}] 

keyvalue是空的!不知道這是爲什麼。如果我嘗試在HTML像打印tagJson

{{tagJson}} 

它打印:

{a:1} 
{a:1} 

keyvalue不工作!

我在哪裏犯錯?

在這裏看到:

http://jsfiddle.net/Vwsej/126/

+0

請創建一個樣品在線(的jsfiddle或plnkr) – akonsu 2014-10-10 07:06:13

+0

tagJson是一個對象不是一個數組 – 2014-10-10 07:09:42

+1

您看不到任何內容,因爲這是表的無效標記。你裏面有'div'元素。 – akonsu 2014-10-10 07:15:26

回答

3

爲什麼你看不到任何東西的真正原因是,正如akonsu發佈,因爲你生產無效的HTML。

爲了保證值單獨表格單元格,則可以使用ng-repeat-start/end,如:

var MainCtrl = function() { 
 
    this.tagList = [{a:1}, {b:2}]; 
 
}; 
 

 
angular 
 
    .module('app', []) 
 
    .controller('Main', MainCtrl) 
 
;
table { 
 
    border-collapse: collapse; 
 
} 
 

 
td { 
 
    border: 1px solid #ccc; 
 
    padding: 5px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.5/angular.min.js"></script> 
 
<div data-ng-app="app" data-ng-controller="Main as main"> 
 
    <table> 
 
    <tr ng-repeat="tagJson in main.tagList"> 
 
     <td ng-repeat-start="(key, value) in tagJson" width="48%" ng-class-odd="'evn'" ng-class-even="'odd'"> 
 
     {{key}} 
 
     </td> 
 
     <td ng-repeat-end width="48%" ng-class-odd="'evn'" ng-class-even="'odd'"> 
 
     {{value}} 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</div>

+0

完美。這工作 – batman 2014-10-10 07:46:35

2

你看不到任何東西,因爲這是爲表無效的標記。裏面有div元素。

也許這樣?

<div ng-controller="MyCtrl"> 
    <table> 
    <tr ng-repeat="tagJson in tagList"> 
     <td ng-repeat="(key, value) in tagJson"> 
     {{key}}={{value}} 
     </td> 
    </tr> 
    </table> 
</div> 

,但發出你想要的標記,我想你需要的是一個自定義的指令。

+0

沒有'div'我怎麼能迭代json並把數據放到'tr'。你能給我jsfiddle鏈接嗎? – batman 2014-10-10 07:17:21

+0

刪除我的回答@akonsu答案是正確的,請參閱這個plunker:http://plnkr.co/edit/9ooSs5NWC9ygfl9N4Hzg?p=preview,upvote him – 2014-10-10 07:22:50