Question

我有跟随json字符串在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"}]

}

目前我正在使用ng-repeat生成简单格式的表格：

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

有人可以帮帮我吗？

Answer 1

您可以创建一个包含一行的表，然后重复该行中的列。然后，您可以在每列中创建一个包含4行和1列的表：

http://plnkr.co/edit/3xvdGC?p=preview（我重新格式化了您的JSON数据以便能够使用它）

但是，如果某些表格单元格的文本需要多行，则会出现问题。要解决这个问题，你可以使用多个ng-repeat语句：

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

Answer 2

像这样写你的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>

你会找到一个羽毛here

请注意，我重新格式化了你的json，丢弃了一些数据，并将所有想象的结构留给你。

Answer 3

您可以为每个标签多次使用ng-repeat：http://jsfiddle.net/4HHc2/2/

将json字符串重新格式化为结果数组后，您可以按如下方式调用每个项目：

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

Angularjs动态表

3 个答案: