bower install ionic-filter-bar

<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>

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

.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'

});

}

})

<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>





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 commandAfter that you need to add the references of JS and CSS in your index.html file as shown below :And then you have to add jett.ionic.filter.bar dependency in angular.module() in app.js file as shown below :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.We will change our page1.html where we have added search button and on click of that button we are calling showFilterBar function.After running you will get the following output :Please Like and Share the CodingDefined.com Blog, if you find it interesting and helpful.