У меня есть такой контролер:
app.controller('DishIndexCtrl', function DishIndexCtrl ($scope) {
$scope.dishs = [ {
name_dish: 'Куряча печінка з грибами у вершковому соусі',
type: 'Гриби',
img: 'img/001_1_pechinka-grybamy-vershkovomu-sous.jpg',
ingredients: [
'куряча печінка - 800 г',
'печериці - 250 г',
'ріпчаста цибуля - 150 г',
'часник - 3 зубчики',
'вершки 20% - 200 мл',
'вершки 20% - 200 мл',
'сіль, чорний мелений перець - за смаком'
],
},
{
name_dish: 'Яйця Бенедикт',
type: 'Мясо',
img: 'img/002_1_yaycya-benedykt.jpg',
ingredients: [
'свіжі яйця - 4 шт',
'булочки для гамбургерів - 2 шт',
'Бекон або сирокопчений шпондер - 8 тоненьких шматочків',
'яєчні жовтки - 3 шт.',
'вершкове масло - 120-150 г',
'лимонний сік - 1 / 2 - 1 ст. л.',
'холодна вода - 1 ст. л.',
],
}
];
});
Суть такова: нужно что бы было два div (потом больше), в которых есть свои имя, ссылка на картинку и ингредиенты. Имя и ссылку вывел, а от массив ingredients что-то вывести не получается:
<div class="col-xs-12 col-md-6 col-lg-4" ng-repeat="dish in dishs">
<div class="thumbnail">
<img class="img-rounded" src="{{dish.img}}" alt="...">
<div class="caption">
<h3>{{dish.name_dish}}</h3>
<p>
<h5>Інгредієнти:</h5>
<ul>
<li ng-repeat="ingredient in dishs">
{{ingredient.ingredients}}
</li>
</ul>
</p>
<p style="text-align: right"><i class="fa fa-angle-right" ></i><a style="margin-left: 3px" href="#" >Детальніше</a></p>
</div>
</div>
А вот результат:
<li ng-repeat="ingredient in dish.ingredients">
, нет?