Angularjs для отображения 2 массивов из объекта json в двух разных таблицах таблеток

У меня есть объект JSON, содержащий два объекта массива. Объект хранится в $ scope.person. Теперь я хочу отобразить массив Likes в первом столбце и массив Dislikes во втором столбце таблицы. Предположим, что длина обоих массивов одинакова, поэтому нет. рядов будет аналогичным. Какой может быть лучший способ сделать это? Проверьте объект JSON ниже.Angularjs для отображения 2 массивов из объекта json в двух разных таблицах таблеток

{ 
    "name": "Justin Clark", 
    "rating": 3, 
    "img": "http://www.fillmy.com/200/200", 
    "Description": "Glutenfree cray cardigan vegan. Lumbersexual pork belly blog, fanny pack put a bird on it selvage", 
    "Likes": [ 
    "Dogs", 
    "Long walks on the beach", 
    "Chopin", 
    "Tacos" 
    ], 
    "Dislikes": [ 
    "Birds", 
    "Red things", 
    "Danish food", 
    "Dead Batteries" 
    ] 
}

Структура таблицы выглядит следующим образом.

<table class="table table-striped"> 
    <thead> 
    <tr> <th>Likes</th> <th>Dislikes</th></tr> 
    </thead> 
    <tbody> 
    <tr ng-repeat="pl in person"> 
     <td>{{pl.Likes}}</td> <td>{{pl.Dislikes}}</td> 
    </tr> 
    </tbody> 
</table>

источник

2016-10-22 Sarmad Asif

вам нужно два отдельных 'нг-repeat' для обоих из них – tanmay

я попытался сделать это, но им не уверен, как это сделать. как мы можем иметь два ng-repeat в одном ** tr **? –

добавил более простой способ сделать это в качестве ответа. Проверьте ниже. – tanmay

Вы можете запустить ng-repeat на одном из массивов (взять Likes) и используя $index из ng-repeat вы можете иметь Dislikes массив отображенный, а также.

Что-то вроде этого ..

<tr ng-repeat="like in data.Likes"> 
    <td>{{like}}</td> 
    <td>{{data.Dislikes[$index]}}</td> 
</tr>

DEMO

источник

2016-10-22 04:39:12 tanmay

Спасибо, tanmay. Это работает. Можем ли мы это сделать: установив ng-repeat = "like in data" и получим td, говорящий {{data.Likes [$ index]}} для Likes и {{data.Dislikes [$ index]}} для Неприятелей? –

@SarmadAsif абсолютно – tanmay

Awesome. Еще раз спасибо! –

Вы можете сделать это,

<body ng-app='app'> 
    <div class="media-list" ng-controller="dishDetailController"> 
    <table> 
     <tr> 
     <th>Likes</th> 
     <th>Dislikes</th> 
     </tr> 
     <tr ng-repeat="customer in data"> 
     {{customer}} 
     <td>{{customer.Likes}}</td> 
     <td>{{customer.Dislikes}}</td> 
     </tr> 
    </table> 
    </div> 
</body> 
</html>

DEMO

EDIT:

Основываясь на предположении, что ваши данные не является массивом,

DEMO

источник

2016-10-22 03:52:35 Sajeetharan

Спасибо за решение, но в демо, он не отображается в отдельных строках. –

вам нужно отобразить дочерний массив в виде строк? – Sajeetharan

Я хочу показать массив Likes в первом столбце как разные строки и не нравится массив во втором столбце как разные строки. Поскольку длина обоих массивов одинакова, то есть 4. Таким образом, было бы всего 4 строки. –

Angularjs для отображения 2 массивов из объекта json в двух разных таблицах таблеток

ответ

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