The Kids In Touch app is coming along nicely right now. Creating a near native experience has been quite a struggle. Fortunately, almost all of the heavy lifting is done for me by the Ionic Framework and AngularJS.
When a user wants to send a message to a friend, the app displays a list of ALL their friends. Without a bit of magic, the user will need to scroll through the list to find the right person. With a big list of friends, that could ugly. Here's a sample:
Fortunately, Ionic has a simple
subheader class that can be put right under a header. The subheader combined with Angular's filter capabilities, make it easy to show only the friend's you are searching for. (There's a Star Wars joke in there.)
<view title="navTitle" left-buttons="leftButtons" right-buttons="rightButtons" hide-back-button="true"> <div class="bar bar-subheader item-input-inset"> <label class="item-input-wrapper"> <i class="icon ion-ios7-search placeholder-icon"></i> <input type="search" placeholder="Search" ng-model="mc.filterName" autocorrect="off"> <button class="button button-clear icon ion-close" ng-click="mc.filterName = ''"> </button> </label> </div> <content has-header="true" has-subheader="true" padding="true"> <div summary-friend ng-repeat="friend in mc.summaryFriends | filter: filterNames" ng-click=""></div> </content> </view>
Like this :