The list view revisited

We will now add the finishing touches to our app, as follows:

  1. Use logic to display the contacts that we pulled from the contact list
  2. Add the pull-to-refresh feature in order to enable users to dynamically refresh the list of users.

First, let's modify the contacts.html file in order to handle the rendering of the list itself. Open the file and make sure that it looks like this:

<ion-view view-title="contacts">
  <ion-content class="has-header">
    <ion-refresher
      pulling-text="Pull to refresh"
      on-refresh="doRefresh()">
    </ion-refresher>
    <ion-list>
    <ion-item collection-repeat="contact in contacts" type="item-text-wrap">
      <h2>{{contact.name}}</h2>

      <p>{{contact.number}}</p>
    </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

Most things ...

Get Learning Node.js for Mobile Application Development now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.