Angularjs动态表答案

【问题标题】：Angularjs dynamic tableAngularjs动态表
【发布时间】：2014-02-08 17:36:49
【问题描述】：

我有以下 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

有人可以帮我解决这个问题吗？

【问题讨论】：

标签： javascript json angularjs angularjs-ng-repeat

【解决方案1】：

您可以创建一个包含一行的表格，然后对该行中的列进行 ng-repeat。然后，您可以在每一列中创建一个包含 4 行和 1 列的表格：

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

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

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

【讨论】：

非常感谢您的帮助。但是我有一个小问题。现在我在 json 中添加了一个参数，该参数在 json "result" 中重复多次：[{"name":"AUS batch “日期”：“02-01-2014”，“结果”：“通过”，“时间”：“早上”，“原因”：“确定”}]，{“名称”：“澳大利亚批次”日期“： "03-01-2014", "result": "pass","time" : "morning","reason":"ok"}] 但我只想显示该元素一次而不是结果取决于数据传入“名称” json 字符串。该怎么做？
这对我来说似乎不是动态的，因为表行名称看起来是硬编码的

【解决方案2】：

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

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

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

【讨论】：

非常感谢您的帮助。但是我有一个小问题。现在我在 json 中添加了一个参数，该参数在 json "result" 中重复多次：[{"name":"AUS batch" date":"02-01-2014","result":"pass","time":"morning","reason":"ok"}],{"name":"AUS batch"date":" 03-01-2014", "result": "pass","time" : "morning","reason":"ok"}] 但我只想在表格中显示该元素一次而不是“result”标签取决于在“名称”json 字符串中传递的数据。该怎么做？
如果我正确理解您的问题，您希望显示“名称”一次，因此您可以使用 ng-model 而不是 ng-repeat 像：<div ng-model="data">{{data[0].name}}</div> 更好的方法可能是重组您的JSON 对象。
非常感谢您的帮助@transcranial

【解决方案3】：

像这样写你的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，删除了一些数据并将所有花哨的格式留给您。

【讨论】：

非常感谢您的帮助。但是我有一个小问题。现在我在 json 中添加了一个参数，该参数在 json "result" 中重复多次：[{"name":"AUS batch" date":"02-01-2014","result":"pass","time":"morning","reason":"ok"}],{"name":"AUS batch"date":" 03-01-2014", "result": "pass","time" : "morning","reason":"ok"}] 但我只想在表格中显示该元素一次而不是“result”标签取决于在“名称”json 字符串中传递的数据。该怎么做？
也许您应该使用这三个正确答案作为基础并提出一个新问题，因为我没有得到您想要的。像以前一样做：向我们展示您的数据，向我们展示您的期望，并提供指向给您的其中一个 plunk 或 fiddles 的链接。这肯定会为您提供更多答案。
您是否注意到三位乐于助人的人花了一些时间给了您正确的答案，但您没有接受。然后，您将问题更改为与对 Json 进行分组有关的问题。尽管如此，所有答案都是有效的，但现在我们看起来有点愚蠢，就像我们一开始没有理解你的问题一样。