I have such a controller:

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 ст. Π».', ], } ]; });

The bottom line is this: you need two divs (then more) that have their own name, a link to a picture and ingredients. I brought out the name and link, but I can't get something out of the ingredients array:

 <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>

And here is the result:

enter image description here

  • 2
    <li ng-repeat="ingredient in dish.ingredients"> , no? - Yaant

2 answers 2

As @Yaant correctly suggests

The second ng-repeat should go through the ingredients array, which is inside the dish object. Now there is an attempt to access the property of the array, but since there is no such property, nothing is output.

 angular.module('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 ст. Π».', ], }]; }); 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script> <div ng-app="app" ng-controller="DishIndexCtrl"> <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="{{dish.type}}"> <div class="caption"> <h3>{{dish.name_dish}}</h3> <h5>Π†Π½Π³Ρ€Π΅Π΄Ρ–Ρ”Π½Ρ‚ΠΈ:</h5> <ul> <li ng-repeat="ingredient in dish.ingredients track by $index"> {{ingredient}} </li> </ul> <p style="text-align: right"><i class="fa fa-angle-right"></i><a style="margin-left: 3px" href="#">Π”Π΅Ρ‚Π°Π»ΡŒΠ½Ρ–ΡˆΠ΅</a> </p> </div> </div> </div> </div>

    Your dishs is an object , and you need to deduce the ingredients from the array of dishs.ingredients

     <li ng-repeat="ingredient in dishs.ingredients"> {{ingredient}} </li>