Dynamic List Items in an Ionic/AngularJS App

In my previous article we have discussed about List or List Items, and we show static contents in that list item. We also discussed about icons, dividers, avatars and thumbnails. In this article I am going to show you how to populate contents in ionic list item using AngularJS Controller. Because every application needs dynamic data instead of static.
To populate dynamic list items follow these steps.


1- Open app.js file and create AngularJS Controller

// Controller for List Item
myApp.controller('ListCtrl',["$scope",function($scope) { 
  // here we create list of dictionary 
}]);

In above code we have create AngularJS Controller named ListCtrl, now in this controller we need to create list of dictionary that holds top cricket players name.

// Controller for List Item
myApp.controller('ListCtrl',["$scope",function($scope) {   // here we create list of dictionary 
   $scope.list_data = [
      { 
          "id": "1",
          "name": "A.J. Finch"
      },
      { 
          "id": "2",
          "name": " E. Lewis"
      },      
      { 
          "id": "3",
          "name": "K.S. Williamson"
      }, 
      { 
          "id": "4",
          "name": "G.J. Maxwell"
      },
      { 
          "id": "5",
          "name": "A.D. Hales"
      },
   ]
   console.log($scope.list_data)  
}]);

2- Now that we have been created our controller, and create $scope.list_data array of dictionary that holds our data. To fetch data from AngularJS controller we need to bind that controller with our index.html file. To tell index.html file that which controller here we are going to use we need following code.

<body ng-app="starter" ng-controller="ListCtrl">
   
</body>

In above code we told our view HTML that use ListCtrl controller and fetch data or model from this controller. Now to populate data in ionic list view we use AngularJS directive named "ng-repeat". This directive will fetch data from controller and display in ionic list items. To display data we use curly braces, and in curly braces we use dot notation to fetch value of our created dictionary. 

  <body ng-app="starter" ng-controller="ListCtrl">
    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Dynamic List Example</h1>
      </ion-header-bar>
      <ion-content>
        <ion-list>            
            <ion-item ng-repeat="ld in list_data">
              {{ ld.name }}
            </ion-item>            
        </ion-list>
      </ion-content>
    </ion-pane>
  </body>

Output

dynamic list




Now we have successfully display or populate our data in list items dynamically. I hope you will understand If you have any problem please feel free to comment.
Lebih baru Lebih lama