Угловые фильтры флагов Js

Question

Я хочу реализовать фильтры на основе флажка. У меня есть рестораны с несколькими специальностями, которые я сохранил в массиве. Также один или несколько ресторанов могут иметь одну и ту же специальность.

Я сохранил фирменные блюда в разных объектах. Вместе с идентификатором и именем.

Теперь, когда я выбираю специальность, я хочу проверить, присутствует ли эта специальность в специальном массиве ресторана. если да, то верните этот ресторан.

Это то, что мне удалось сделать до сих пор.

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; 
    }    
}); 

Answer 1

Вы на правильном пути, используя функцию, чтобы получить фильтр.

Функция, которую вы пытаетесь реализовать, называется функцией predicate.

Функция (значение, индекс): Функция предиката может использоваться для записи произвольных фильтров. Функция вызывается для каждого элемента массива. Конечным результатом является массив тех элементов, для которых предикат возвращался true.

Пожалуйста, смотрите рабочий пример here

Пример кода ниже:

$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; 
} 

Вы должны обновить HTML для привязки флажков к проверяемой стоимости, пожалуйста, смотрите ниже:

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