@GaserV

Как реализовать фильтр товаров по цвету?

Ув. Гуру. Подскажите, как реализовать фильтр товаров по цвету на angular js?
Ниже исходник с фильтром по цене, а также выводом деталей продукта. И к этому всему мне необходимо добавить еще фильтр по цвету. Товары в JSON(Для теста). Надеюсь на вашу помощь) Спасибо за раннее!)
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;
		  };
		};

	});

});
  • Вопрос задан
  • 592 просмотра
Пригласить эксперта
Ответы на вопрос 1
@GaserV Автор вопроса
Получилось. Почти. Как добить?) Проблема в том, что из-за фильтра цвета у меня сейчас не выводит ничего. Консоль чиста. В чем ошибка?

<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;
		  };
		};
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы