Добавление статического заголовка при создании динамической таблицы

Question

Добавление статического заголовка при создании динамической таблицы

0

Я делаю таблицу, строка и столбцы которой зависят от JSON

JSON:

     $scope.dataToShow=[

            tableHeder=["First Name","Age"],

            {
                name:"rahim",
                age:23
            },
            {
                name:"karim",
                age:24
            }
        ];

Мой код:

<table>
      <tr>
         <th>Select</th>
         <th ng-repeat="header in dataToShow.tableHeader"></th>
      </tr>
      <tr ng-repeat="row in dataToShow">
           <td>
               <input type="checkbox">
           </td>
            <td ng-repeat="item in row">{{item}}</td>
        </tr>
 </table>

Я хочу, чтобы мое мнение выглядело так:

Выбрать возраст имен

checkbox rahim 23

checkbox karim 24

Но я получаю:

Выбрать

Флажок Название возраст

Флажок rahim 23

Флажок karim 24

Как я могу это решить???

ishmam shahriar 15 авг. 2016, в 09:37

Источник

1

Где находится JSON? Покажите нам
Nihar Sarkar 15 авг. 2016, в 07:20
0

Это не совсем допустимый JSON
Syam Pillai 15 авг. 2016, в 07:26

Теги:

javascript

html

angularjs

2 ответа

0

Попробуйте этот код:

 <table>
          <tr>
             <th>Select</th>
             <th>{{dataToShow.tableHeder[0]}}</th>
             <th>{{dataToShow.tableHeder[1]}}</th>
          </tr>
          <tr ng-repeat="row in dataToShow">
               <td>
                   <input type="checkbox">
               </td>
                <td >{{row.name}}</td>
                <td >{{row.age}}</td>
            </tr>
     </table>

Используя $index вы можете получить индексный номер цикла.

Nihar Sarkar 15 авг. 2016, в 05:39

0

dataToShow - это массив. Как вы думаете, dataToShow.tableHeader будет работать?
Syam Pillai 15 авг. 2016, в 07:32
0

После небольшой модификации в этом массиве этот код будет работать.
Nihar Sarkar 15 авг. 2016, в 07:33

Ещё вопросы

dataToShow - это массив. Как вы думаете, dataToShow.tableHeader будет работать?
После небольшой модификации в этом массиве этот код будет работать.

Syam Pillai · Accepted Answer · 2016-08-15T05-50-00.000Z

если ответ JSON не из бэкэнд, сделайте некоторые изменения

JSON:

$scope.dataToShow={

        tableHeder:["First Name","Age"],

        tableData: [{
            name:"rahim",
            age:23
        },
        {
            name:"karim",
            age:24
        }]
    };

HTML:

<table>
      <tr>
         <th>Select</th>
         <th ng-repeat="header in dataToShow.tableHeader">{{header}}</th>
      </tr>
      <tr ng-repeat="row in dataToShow.tableData">
           <td>
               <input type="checkbox">
           </td>
            <td >{{row.name}}</td>
            <td >{{row.age}}</td>
        </tr>
 </table>

Это определенно будет работать