神刀安全网

Adding Search Bar in the Header of Ionic App

In our previous post we have discussed about  How to Group Elements in Ionic Framework , we will be taking the code from there and modify the code to add the filter capabilities in our application. You should have Npm, Bower and Git installed in your system.

Next we will install ionic-filter-bar plugin which is a platform specific search filter plugin for the Ionic Framework (Only iOS / Android).You can install this plugin using command bower install ionic-filter-bar .

Adding Search Bar in the Header of Ionic App

After that you need to add the references of JS and CSS in your index.html file as shown below :

<link href="../ionic-filter-bar/dist/ionic.filter.bar.min.css" rel="stylesheet">

<script src="../ionic-filter-bar/dist/ionic.filter.bar.min.js"></script>

And then you have to add jett.ionic.filter.bar dependency in angular.module() in app.js file as shown below :

angular.module(‘starter’, [‘ionic’, ‘starter.controllers’, ‘starter.services’, ‘jett.ionic.filter.bar’])

Next we will change our controller to the below code where we are taking one more parameter ($ionicFilterBar) and then creating a function showFilterBar. In this we are updating the $scope.values based on the filteredItems passed. You also have one more property (filterProperties) which is used to define the names of the properties that need to be filtered.

.controller(‘repeaterCtrl’, function ($scope, $ionicFilterBar) {

  $scope.values = window.Values.sort(function (a, b) {

    return a.first_name > b.first_name ? 1 : -1;

  });


  $scope.doRefresh = function () {

    $scope.values = window.Values;

    $scope.$broadcast(‘scroll.refreshComplete’);

  }


  $scope.showFilterBar = function () {

    filterBar = $ionicFilterBar.show({

      items: $scope.values,

      update: function (filteredItems) {

        $scope.values = filteredItems

      }

      //filterProperties : ‘first_name’

    });

  }

})

We will change our page1.html where we have added search button and on click of that button we are calling showFilterBar function.

<ion-view view-title="Search in Header">

 <ion-nav-buttons side="secondary">

  <button class="buttons button-icon ion-android-search" ng-click="showFilterBar()"></button>

 </ion-nav-buttons>

 <ion-content class="padding">

  <ion-refresher pulling-text="Update Date" on-refresh="doRefresh()"></ion-refresher>

  <ion-list>

   <ion-item collection-repeat="value in values | groupByLastName" divider-collection-repeat>

    <p>First Name : {{value.first_name}}</p>

    <p>Last Name : {{value.last_name}}</p>

   </ion-item>

  </ion-list>

 </ion-content>

</ion-view>


After running you will get the following output :

Adding Search Bar in the Header of Ionic App

Please Like and Share the CodingDefined.com Blog, if you find it interesting and helpful.

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Adding Search Bar in the Header of Ionic App

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮