Ionic ng-repeat example

ionic ng-repeat example

Let’s iterate through some array and print a list in Ionic view. For this task we will use Angular ng-repeat directive.

To test ng-repeat directive we need an existing Ionic project. But it will be better if you can generate one using ionic start command like we did in previous examples.

Ionic ngRepeat directive

npRepeat is an Angular directive used for iterations. It works very simple. Imagine that you have an array of any objects in your controller’s $scope and you want to print it out dynamically in a list. All you need is this:

<ul>
  <li ng-repeat="object in objects">
    {{object}}
  </li>
</ul>

This directive will iterate through all elements inside the objects array and each iteration is accessible via object variable. As a result, all list items will be generated according to objects array.

Using ng-repeat in Ionic

Let’s open the example project (the generated one). We will make changes only in 2 files:

  • www/js/controllers.js
  • www/templates/tab-dash.html

In the controllers.js file modify the DashCtrl controller to make it looks like this:

.controller('DashCtrl', function($scope) {
  $scope.items = [
    {
      name:"item 1",
      description:"description example 1"
    },
    {
      name:"item 2",
      description:"description example 2"
    },
    {
      name:"item 3",
      description:"description example 3"
    }
  ]
})

Here we created an array of simple objects that have name and description fields.

Replace tab-dash.html with a markup that uses ng-repeat:

<ion-view view-title="Dashboard">
  <ion-content class="padding">
    <h2>Welcome to Ionic</h2>
    <div ng-repeat="item in items" >
      <h2>{{item.name}}</h2>
      <p>{{item.description}}</p>
    </div>
  </ion-content>
</ion-view>

After all, you can test your app without even plugging a device by running:

ionic serve localhost

Then you can visit http://localhost:8100 in your browser. The result should look like this:

ionic ng-repeat result

Leave a Reply

Be the First to Comment!