How to create a dynamic list using controller and services

ionic-v1
1

Graphically, my index.html looks like this;

![image](upload://8wCgQIUO0Mqnqn1FGOQSJ0QgNhD.png)

Then I would like to click into seperate lists of food item for each category.

In code, my menu-detail.html page looks like this;

        <div class="list card">
            <a class="item list-inset item-thumbnail-left" ng-repeat="item in items" href="#/{{items.foodItem}}">
                <img ng-src=" {{ items.imgsrc }} ">

                <a class="item item-icon-left item-button-right">
                     {{ items.foodItem }}
                <button class="button button-positive" ng-click="count = count + {{ menu.calories }} "> {{ items.calories }} </button>
                </a>

                <p><a class="button button-energized button-block icon ion-arrow-left-b" href="#/tab/menus">&nbsp;Back to Menu</a>
                </p>
                <p><a class="button icon ion-settings button-block" ng-click="count = 0">&nbsp;Reset</a>
                </p>
            </a>
        </div>

and the controller looks like this

// "items" is returning mock data
    .controller('menuDetailCtrl', function ($scope, menuService) {
      index = ['Breakfast', 'Lunch', 'Dinner', 'Snacks'];
     
        $scope.items = [
    {
                foodItem: "Cereal",
                imgsrc: "../img/almond.jpg",
                calories: 567
        },
            {
                foodItem: "Bread",
                imgsrc: "../img/olive.jpg",
                calories: 567
        },
         
  ],
[
            {
                foodItem: "Wrap",
                imgsrc: "../img/meats.jpg",
                calories: 567
      },
            {
                foodItem: "Sandwich",
                imgsrc: "../img/nibbles.jpg",
                calories: 567
      },
            {
                foodItem: "Soup",
                imgsrc: "../img/fishAndShellfish.jpg",
                calories: 567
      },
],
    [
            {
                foodItem: "Lamb",
                imgsrc: "../img/meats.jpg",
                calories: 567
      },
            {
                foodItem: "Burger",
                imgsrc: "../img/nibbles.jpg",
                calories: 567
      },
            {
                foodItem: "Shepherds Pie",
                imgsrc: "../img/fishAndShellfish.jpg",
                calories: 567
      },
            {
                foodItem: "vegetables",
                imgsrc: "../img/almond.jpg",
                calories: 567
      }
    ],
    [
            {
                foodItem: "Biscuits",
                imgsrc: "../img/meats.jpg",
                calories: 567
      },
            {
                foodItem: "Sweets",
                imgsrc: "../img/nibbles.jpg",
                calories: 567
      },
            {
                foodItem: "Yoghurt",
                imgsrc: "../img/fishAndShellfish.jpg",
                calories: 567
      },
            {
                foodItem: "Chocolate",
                imgsrc: "../img/almond.jpg",
                calories: 567
      }
    ]
  ];

// $scope.index = indices[$stateParams.itemsFoodItem];
    $scope.getDetail = function(ObjectData){
    menuService.items = ObjectData.foodItem;
    menuService.items = ObjectData.imgsrc;
    menuService.items = ObjectData.calories;
  }

})
    
    and I get this result - an unpopulated list;
    
    ![image](upload://c2Pqv06lwHmP7EpC3i31ejF6br.png)

How do I get the list to poputate with the items I have listed in the controller? As you can see hopefully from the menu-detail.html code, the expressions are listed relative to the information in the controller but I get a blank placeholders in the gui for the code

2

First off, your $scope.items array is improperly formatted. Short hand you have something like this:

$scope.items = [1, 2, ], [3, 4, 5, ], [ etc...];

It needs to be like:

$scope.items = [1, 2, 3, 4, 5, etc...];

Full partial example:

$scope.items = [
    {
        foodItem: "Cereal",
        imgsrc: "../img/almond.jpg",
        calories: 567
    },
    {
        foodItem: "Bread",
        imgsrc: "../img/olive.jpg",
        calories: 567
    },
    {
        foodItem: "Wrap",
        imgsrc: "../img/meats.jpg",
        calories: 567
    },
    {
        foodItem: "Sandwich",
        imgsrc: "../img/nibbles.jpg",
        calories: 567
    },
    {
        foodItem: "Soup",
        imgsrc: "../img/fishAndShellfish.jpg",
        calories: 567
    },
    {
        etc...
    }
];

I’d correct those JavaScript errors first, then go from there. Your HTML looks all right minus your href, however your Browser’s Dev Tools should be throwing a lot of errors right now with how you have your array formatted.