Angular Js Checkbox filters

Question

I want to implement checkbox based filters. I have restaurants which has multiple specialties which i have stored in an array.Also one or more restaurants may have same specialty.

I have stored the specialties in different object.Along with the id and name.

Now whenever i select a specialty i want to check if this specialty is present in the specialty array of a restaurant. if yes then return this restaurant.

This is what i managed to do so far.

Html

<div ng-app="myApp" ng-controller="myCtrl">
    <input type="text" ng-model="search_cat.name">
    <br>
    <b>Category:</b>
    <div ng-repeat="cat in cuisines">
        <b><input type="checkbox" ng-model="filterxyz[cat.id]" /> {{cat.name}}</b>
    </div>
    <hr />
    <div ng-repeat="w in filtered=(restaurants | filter:filterByCategory) ">
        {{w.name}}
    </div>
    <hr />
    Number of results: {{filtered.length}}
</div>

JS

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
    $scope.restaurants = [
        { name: "Restaurant A", specialities:['1','2','3'] },
        { name: "Restaurant B", specialities:['1','2'] },
        { name: "Restaurant C", specialities:['1','2','3','4']},
        { name: "Restaurant D", specialities:['1','2','3','4','5']},
        { name: "Restaurant E", specialities:['1']},
        { name: "Restaurant F", specialities:['3'] },
        { name: "Restaurant G", specialities:['1','4']},
        { name: "Restaurant H", specialities:['1','2','3','4'] }
    ];

    $scope.cuisines=[
            { name: "Speciality A1", id: "1"},
            { name: "Speciality A2", id: "2"},
            { name: "Speciality A3", id: "3"}, 
            { name: "Speciality A4", id: "4"}, 
            { name: "Speciality A5", id: "5"}
    ];
    $scope.filterxyz = {};

    $scope.filterByCategory = function (restaurant) {
        return $scope.filterxyz[restaurant.specialities] || noFilter($scope.filterxyz);
    };

    function noFilter(filterObj) {
        for (var key in filterObj) {
            if (filterObj[key]) {
                return false;
            }
        }
        return true;
    }            
});

for example when i select speciality A1 it must fetch me all the restaurants except for restaurant F. because speciality A1 is not present in restaurant F — Gautam
– Gautam, Commented Jan 11, 2016 at 5:42

Tjaart van der Walt · Accepted Answer · 2016-01-11 06:29:49Z

You are on the right track by using a function to get the filter.

The function you are trying to implement is called a predicate function.

function(value, index): A predicate function can be used to write arbitrary filters. The function is called for each element of array. The final result is an array of those elements that the predicate returned true for.

Please see working example here

Example code below:

$scope.filterByCategory = function(value, index) {
   var selectedCategories = getFilterCategories();
   if (selectedCategories.length === 0) {
       // no filter selected return true
      return true;
   }
   for (var i = 0; i < selectedCategories.length; i++) {
       if (value.specialities.indexOf(selectedCategories[i]) > -1) {
           return true;
       }
   }
   return false;
};

function getFilterCategories() {
  var selectedCategories = [];
  for (var i = 0; i < $scope.cuisines.length; i++) {
     if ($scope.cuisines[i].checked) {
        selectedCategories.push($scope.cuisines[i].id);
     }
  }
  return selectedCategories;
}

You will have to update your html to bind the checkboxes to a checked value, please see below:

<div ng-repeat="cat in cuisines">
  <b><input type="checkbox" ng-model="cat.checked" /> {{cat.name}}</b>
</div>

Collectives™ on Stack Overflow

Angular Js Checkbox filters

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related