Angularjs динамическая таблица

Я следующий JSON строка для создания отчета в angularjs: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, чтобы иметь возможность работать с ним)

Однако это создает проблемы, если текст некоторых ячейкам таблицы требуется несколько строк. Для того, чтобы решить, что вы могли бы просто использовать несколько нг-повтор заявления:

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

источник

2014-02-08 18:05:22

Спасибо много для вашей помощи. Но у меня есть небольшая проблема. Теперь я добавил один параметр, добавленный в json, который повторяется несколько раз в json «result»: [{«name»: «AUS batch» date »:« 02-01-2014 «результат»: «проход», «время»: «утро», «причина»: «ok»}], {"name": "AUS batch" date ":" 03-01-2014 "," result ":" pass "," time ":" morning "," reason ":" ok "}], но я хочу показать, что элемент только одноразовый instea d результата зависит от данных, переданных в строке «name» 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

Обратите внимание, что я reformated ваш json, сбросил некоторые данные и оставил вам все фантазии.

источник

2014-02-08 18:12:02 mainguy

Упс, @ Т.С. был быстрее, чем я ... – mainguy

Большое спасибо за вашу помощь. Но у меня есть небольшая проблема. Теперь я добавил один параметр в 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» json. Как это сделать? –

Возможно, вам следует использовать эти три правильных ответа в качестве базы и задать новый вопрос, так как я не получаю то, что вы хотите. Сделайте это по-прежнему: покажите нам свои данные, покажите нам, что вы ожидаете, и укажите ссылки на один из плутов или скриптов, предоставленных вам. Это даст вам, безусловно, еще больше ответов. – mainguy

Вы можете просто использовать нг-повторить несколько раз для каждой метки: 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», «результат»: «пройти», «время»: «утро», «причина»: «ok»}], {"name": "AUS batch" date ":" 03- 01-2014 "," result ":" pass "," time ":" morning "," reason ":" ok "}], но я хочу показать, что элемент только один раз вместо тега результата в таблице зависит от данные передаются в строке «name» json. Как это сделать? –

Если я правильно понял ваш вопрос, вы хотите отобразить «имя» один раз, поэтому вы можете использовать 'ng-model' вместо' ng-repeat', например: '

' Лучшим способом может быть реструктурирование вашего объекта JSON. – transcranial

Большое спасибо за вашу помощь @transcranial –

Angularjs динамическая таблица

ответ

Смежные вопросы