Angularjs動態表

我有以下的JSON字符串來生成angularjs報告：採用NG-重複的簡單格式Angularjs動態表

{ 
"result": [{name:"AUS ba",date":"02-01-2014", "result": "pass","time" : "morning","reason":"ok"}], 
"result": [{name:"SA ba",date":"02-01-2014", "result": "pass","time" : "afternoon","reason":"ok"}], 
"result": [{name: "NZ ba",{"date":"02-01-2014", "result": "fail","time" : "morning","reason":"ok"}], 
"result": [{name:"AUS ba","date":"03-01-2014", "result": "pass","time" : "morning","reason":"ok"}], 
"result": [{name:"SA ba",date":"03-01-2014", "result": "fail","time" : "morning","reason":"batch   failed"}], 
"result": [{name: "NZ ba",date": "03-01-2014", "result": "fail","time" : "morning","reason":"batch error"}]

}

目前我生成表：

Name  Date  Result Reason Time 
AU ba  02-01-2014 PASS Ok  Morning 
AU ba  03-01-2014 ... 
AU ba  04-01-2014 ... 
........... 
...........

現在我想動態創建這樣的表格

  02-01-2014 02-01-2014 02-01-2014 02-01-2014 03-01-2014 03-01-2014 
     Morning  Morning  Afternoon  Afternoon Morning  Morning 
AU ba Pass[Result] ok[Reason] Fail   Ok   Pass   ok 
SA ba Fail   batch failed

有人可以幫我這個嗎？

來源

2014-02-08 ron_meh

你可以製作一行表，然後ng-重複該行中的列。在每一列中，你就可以做一個表，4行一列：

http://plnkr.co/edit/3xvdGC?p=preview（我重新格式化你的JSON數據能夠與它的工作）

但是，這會產生問題，如果一些文字表格單元格需要多行。爲了解決這個你可以只使用多個NG-重複語句：

http://plnkr.co/edit/EUKNn5?p=preview

來源

2014-02-08 18:05:22

謝謝很多你的幫助。但我有一個小問題。現在我已經添加了一個參數添加在JSON中重複多次在JSON「結果」：[{「名稱」：「AUS批」日期「：」02-01-2014 「，」結果「：」通過「，」時間「：」早晨「，」原因「：」確定「}]，{」名稱「：」AUS批次「日期」：「03-01-2014」，「「：」通過「，」時間「：」早晨「，」原因「：」確定「}]但我只想顯示該元素只有一次性instea結果d取決於在「名稱」json字符串中傳遞的數據。怎麼做？ –

寫你的HTML這樣的：

<body> 
    <table ng-controller="MyCtrl"> 
    <tr> 
     <td ng-repeat="r in result"> 
     <table border=1> 
      <tr> 
      <td> 
       {{r.date}} 
      </td> 
      </tr> 
      <tr> 
      <td> 
       {{r.result}} 
      </td> 
      </tr> 
      <tr> 
      <td> 
       {{r.time}} 
      </td> 
      </tr> 
      <tr> 
      <td> 
       {{r.reason}} 
      </td> 
      </tr> 
     </table> 
     </td> 
    </tr> 
    </table> 
</body>

你會發現一個plunker here

請注意，我重新格式化您的json放棄了一些數據，並將所有的幻想都格式化給了你。

來源

2014-02-08 18:12:02 mainguy

糟糕，@ T.S。比我更快... – mainguy

非常感謝您的幫助。但是我有一個小問題。現在我在json中添加了一個參數，它在json「result」中重複多次：[{「name」：「AUS batch」 date「：」02-01-2014「，」result「：」pass「，」time「：」morning「，」reason「：」ok「}]，{」name「：」AUS batch「date」 03-01-2014「，」結果「：」通過「，」時間「：」早上「，」原因「：」確定「}]但我想顯示該元素只有一次，而不是表中的」結果「標記取決於在「名稱」json字符串中傳遞的數據。怎麼做？ –

也許你應該使用這三個正確的答案作爲基礎，並提出一個新的問題，因爲我沒有得到你想要的。按照以前的方式做：向我們顯示您的數據，向我們展示您的期望，並提供鏈接給您的其中一個活頁夾或小提琴。這將爲您提供更多的答案。 – mainguy

你可以只用NG重複多次爲每個標籤：http://jsfiddle.net/4HHc2/2/

重新格式化你的JSON字符串作爲結果的數組後，你可以調用每個項目如下：

<td ng-repeat="d in data">{{d.date}}</td>

來源

2014-02-08 18:20:09 transcranial

非常感謝您的幫助。但是我有一個小問題。現在我在json中添加了一個參數，它在json「result」中重複多次：[{「name」：「AUS batch」date「：「02-01-2014」，「result」：「pass」，「time」：「morning」，「reason」：「ok」}]，{「name」：「AUS batch」date「 01-2014「，」結果「：」通過「，」時間「：」早晨「，」原因「：」確定「}]但我想顯示該元素只有一次，而不是表中的」結果「標籤取決於數據在「名稱」json字符串中傳遞。怎麼做？ –

如果我正確理解你的問題，你想要顯示一次「名稱」，所以你可以使用'ng-model'而不是'ng-repeat'，例如：'

'更好的方法可能是重構你的JSON對象。 – transcranial

非常感謝您的幫助@transcranial –

Angularjs動態表

回答

相關問題