The list view revisited
We will now add the finishing touches to our app, as follows:
Use logic to display the contacts that we pulled from the contact list
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...