CODEWITHSUNDEEP
javascripthtmlangularjs
methuselah
methuselah

Reputation: 13206

Filter search with AngularJs not working

I am trying to adapt the following search filter seen here but with little sucesss. What am I getting wrong?

This is my code so far:

controllers.js

angular.module('starter.controllers', ['starter.services'])

.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
})

.controller('SearchCtrl', ["$scope", "ServicesData", function($scope, ServicesData, filterFilter)  {

  // Get list items

  $scope.categoryList = ServicesData.getAllCategories();
  $scope.serviceList = ServicesData.getAllServices();
  $scope.businessList = ServicesData.getAllBusinesses();

  // Filter search

  $scope.filterOptions = function(){
    $scope.filteredArray = filterFilter($scope.categoryList, $scope.serviceList, $scope.businessList);
  };
}]);

search.html

<div class="bar bar-subheader" style="border-bottom: 1px solid #ddd; height: 4em">
    <div class="bar bar-header item-input-inset">
      <label class="item-input-wrapper" style="margin-left: -0.5em;">
        <i class="icon ion-ios-search placeholder-icon"></i>
        <input type="search" placeholder="Search" ng-model="data" ng-change="filterOptions()">
      </label>
      <button class="button button-clear">
        Cancel
      </button>
    </div>
  </div>
<div id="result-list" ng-show="data.length > 0" style="margin-top: 3.9em" ng-model="data">
  <ul class="list">
    <li class="item" ng-repeat="item in categoryList | orderBy:'title'">{{item.title}}</li>
    <li class="item" ng-repeat="item in serviceList | orderBy:'title'">{{item.title}}</li>
    <li class="item" ng-repeat="item in businessList | orderBy:'title'">{{item.name}}</li>
  </ul>
</div>

Upvotes: 0

Views: 562

Answers (1)

koox00
koox00

Reputation: 2731

First you have to annotate you controller correctly.

e.g: 

.controller('SearchCtrl', ["$scope", "ServicesData", "filterFilter" function($scope, ServicesData, filterFilter)  {

Second filterFilter takes as arguments, one array, an expression to filter that array and a comparator. Meaning you cannot pass just three arrays and expect some result.

If you want to filter all three arrays with one Input you have to call the filter function against each array separately. Or apply the filter directly in the ng-repeat of each <li>.

e.g:

<li class="item" ng-repeat="item in filteredCategory = (categoryList | orderBy:'title' | filter:data )">{{item.title}}</li>
<li class="item" ng-repeat="item in filteredService = (serviceList | orderBy:'title' | filter:data)">{{item.title}}</li>
<li class="item" ng-repeat="item in filterredBussiness = (businessList | orderBy:'title' | filter:data)">{{item.name}}</li>

Keep in mind that this way you don't need the ng-change in the input.

Upvotes: 1

Related Questions