javascript - Angularjs动态表

标签 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: "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 行 1 列的表格:

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

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

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

关于javascript - Angularjs动态表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21649441/

相关文章:

javascript - 将变量从 while 循环内传递到 popupdiv

javascript - 在 Javascript 中使用 map 函数返回新值

python - JSON 验证,使 schema 中定义的所有键都成为必需

javascript - 在 AngularJS 中使用单例模式是一种不好的做法吗?

javascript - Vue js 条件布局

javascript - 我可以使用 JS 使符号可拖动吗?

javascript - Bootstrap 的 AngularJS 分页不显示下一个/上一个按钮

angularjs - 在同一指令的链接函数中使用指令 Controller 的函数

javascript - 如何更改 Controller 中的 CSS

javascript - 更改 html 下载的名称