Fatal编程技术网

Javascript Angularjs动态表

javascript json angularjs

Javascript Angularjs动态表,javascript,json,angularjs,angularjs-ng-repeat,Javascript,Json,Angularjs,Angularjs Ng Repeat,我有以下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: "N

我有以下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
谁能帮我一下吗？

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

（我重新格式化了JSON数据，以便能够使用它）

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

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


{{r.date}
{{r.result}
{{r.time}
{{r.reason}}
你会找到一个抢劫犯

请注意，我重新格式化了您的json，删除了一些数据，并将所有奇特的格式留给了您。

您可以对每个标签重复使用ng多次：

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

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

{{d.date}
非常感谢您的帮助。但我有一个小问题。现在我在json中添加了一个参数，在json“结果”中多次重复：[{“名称”：“AUS批次”日期：“02-01-2014”，“结果”：“通过”，“时间”：“上午”，“原因”：“确定”}]，{“名称”：“AUS批次”日期”：“03-01-2014”，“结果”：“通过”，“时间”：“上午”，“原因”：“确定”}]但我想说明的是，元素仅一次而不是结果取决于在“name”json字符串中传递的数据。如何做到这一点？在我看来，这并不是动态的，因为表行名称看起来很难编码。非常感谢您的帮助。但我有一个小问题。现在我在json中添加了一个参数，它在json“result”中重复多次：[{“name”：“AUS batch”date:“02-01-2014”，“result:“pass”，“time:“morning”，“reason:“ok”}]，{“name:“AUS batch”date:“03-01-2014”，“结果”：“通过”，“时间”：“早上”，“原因”：“确定”}]但我想表明，表中的元素仅一次而不是“结果”标记取决于“名称”中传递的数据“json字符串。怎么做？也许你应该以这三个正确答案为基础，问一个新问题，因为我没有得到你想要的。像以前一样做：向我们展示你的数据，向我们展示你的期望，并提供给你的一个弹弓或小提琴的链接。这肯定会给你提供更多的答案。你是否注意到三个乐于助人的人花了一些时间给了你正确的答案，但你没有接受。然后，您将问题改为与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”}]，{“name:“AUS batch”date:“03-01-2014”，“result:“pass”，“time:“morning”，“reason:“ok”}]但我想表明，表中的元素仅一次而不是“result”标记取决于“name”json字符串中传递的数据。如何做到这一点？如果我正确理解您的问题，您希望只显示一次“名称”，这样您就可以使用
ng model
而不是
ng repeat
例如：
{{data[0].name}
更好的方法可能是重新构造JSON对象。非常感谢@transcranial的帮助