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.

3

You can create a dynamic list in Ionic using a controller and a service pretty easily. The key is to keep your data logic in a service and only handle the display in your controller.

Service (listService.js):

angular.module('app.services', []) .factory('ListService', function($http) { return { getItems: function() { return $http.get('https://example.com/api/items').then(function(response) { return response.data; }); } }; });

Controller (listController.js):

angular.module('app.controllers', []) .controller('ListCtrl', function($scope, ListService) { $scope.items = []; ListService.getItems().then(function(data) { $scope.items = data; }, function(error) { console.error('Error fetching items:', error); }); });

View (list.html):

<ion-view view-title="Dynamic List"> <ion-content> <ion-list> <ion-item ng-repeat="item in items"> {{item.name}} </ion-item> </ion-list> </ion-content> </ion-view>

This setup separates logic cleanly:

  • The service handles data retrieval.

  • The controller only updates the scope.

  • The view stays simple and reactive.

I use a similar approach when working on small web utilities. It keeps the structure modular and easy to maintain as features grow.