Заполните таблицу html из значений массива json, используя ng-if - PullRequest
Новая
       14

Заполните таблицу html из значений массива json, используя ng-if

1 голос
/ 03 мая 2019

У меня есть массив JSON следующим образом 

$scope.array =[{"id":"1","age":"3","name":"ab"},{"id":"2","age":"2","name":"ee"},{"id":"3","age":"1","name":"dd"}];

Мне нужно показать эти данные в таблице, используя ng-if, где, если возраст равен 1, тогда в этой ячейке должны быть только данные, относящиеся к возрасту = 1 и т. Д. Я использовал следующий код. 

    <html>
    <table>
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
<tr>
    <tr ng-repeat="record in array">
    <td ng-if="record.age == '1'">{{record.id}} {{record.name}}</td>
    <td ng-if="record.age == '2'">{{record.id}} {{record.name}}</td>
    <td ng-if="record.age == '3'">{{record.id}} {{record.name}}</td>
    </table>
    </html>

Но в настоящее время все значения отображаются в первом столбце одно за другим. Я не могу понять причину.

1 Ответ

1 голос
/ 03 мая 2019

Не забудьте закрыть тег tr конечным тегом. Примерно так: 

<tr>
    <th>one</th>
    <th>two</th>
    <th>three</th>
</tr>

<tr>
    <tr ng-repeat="record in array">
        <td ng-if="record.age == '1'">{{record.id}} {{record.name}}</td>
        <td ng-if="record.age == '2'">{{record.id}} {{record.name}}</td>
        <td ng-if="record.age == '3'">{{record.id}} {{record.name}}</td>
    </tr>
</tr>

Однако в вашем случае вы ничего не получите, используя ng-if. Вы получите тот же вывод, если будете использовать следующий код: 

<tr>
    <th>one</th>
    <th>two</th>
    <th>three</th>
</tr>

<tr>
    <tr ng-repeat="record in array">
        <td>{{record.id}} {{record.name}}</td>
    </tr>
</tr>

Если вы действительно хотите использовать ng-if, то ваш способ в порядке.

...