Book Image

Learning Node.js for Mobile Application Development

Book Image

Learning Node.js for Mobile Application Development

Overview of this book

Table of Contents (21 chapters)
Learning Node.js for Mobile Application Development
Credits
About the Authors
About the Reviewers
www.PacktPub.com
Preface
14
Creating an E-Commerce Application Using the Ionic Framework
Index

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 look the same, but we have highlighted some important changes:

  • We added an ion-refresher tag, which creates a pull...