How to filter products by color?

Question

Angular

SW. Guru. Tell me how to implement a product filter by color in angular js?
Below is the source with a filter by price, as well as the output of product details. And to all this I need to add another filter by color. Goods in JSON(For test). I hope for your help) Thanks for the early!)

var app = angular.module('productFilter',[]);

app.controller('ProductFilterCtrl',function ($scope, $http) {
    
  $http.get("../data.json").success(function(response){
    $scope.filterPriceFrom = 750;
    $scope.filterPriceTo = 10000;
    $scope.products = response.products;

    console.dir($scope.products);

    $scope.byPrice = function (price, minValue, maxValue) {
      if (minValue === undefined) minValue = Number.MIN_VALUE;
      if (maxValue === undefined) maxValue = Number.MAX_VALUE;

      return function predicateFunc(item) {
        return item[price] >= minValue && item[price] <= maxValue;
      };
    };

  });

});

Answer 1

Happened. Almost. How to finish it off?) The problem is that because of the color filter, nothing is displayed for me now. Console is clean. Where is the mistake?

<a id="color-wight" style="background-color: #fff; border: 2px solid #ddd;" title="белый" ng-model="filterColor" href="">white</a>
                            <a id="color-biege" style="background-color: #F4E7B0; border: 2px solid #ddd;" title="бежевый" ng-model="filterColor" href="">biege</a>
                            <a id="color-brown" style="background-color: #964B00;" title="коричневый" ng-model="filterColor" href="">brown</a>
                            <a id="color-black" style="background-color: #000;" title="черный" ng-model="filterColor" href="">black</a>
                            <a id="color-red" style="background-color: #f00;" title="красный" ng-model="filterColor" href="">red</a>
                            <a id="color-orange" style="background-color: #F4A209;" title="оранжевый" ng-model="filterColor" href="">orange</a>
                            <a id="color-yellow" style="background-color: #FCDE00;" title="желтый" ng-model="filterColor" href="">yellow</a>
                            <a id="color-green" style="background-color: #61C107;" title="зеленый" ng-model="filterColor" href="">green</a>
                            <a id="color-blue" style="background-color: #0699DD;" title="синий/голубой" ng-model="filterColor" href="">blue</a>
                            <a id="color-violet" style="background-color: #884A93;" title="фиолетовый" ng-model="filterColor" href="">violet</a>

<div class="item material-plastik color-biege type-line" style="display: block;" 
                ng-repeat="product in products | filter:byColor('Color', filterColor) | filter:byPrice('Price', filterPriceFrom, filterPriceTo)">

$scope.byColor = function (color, filterColor) {
      return function predicateFunc(item) {
        return item[color] == filterColor;
      };
    };