CODEWITHSUNDEEP
angularjs
Tim Webster
Tim Webster

Reputation: 9196

angular.js bind filtered results to select input

If i have a json array containing my products and am using ng-repeat to display them on page.

I then have two select boxes used to filter by colour and size which is all working fine,

However if I filter by colour the size select box still shows all sizes for the entire array of products, how can I refresh the contents of the size select box based on whats filtered?

Upvotes: 0

Views: 1027

Answers (2)

Pythonic
Pythonic

Reputation: 486

Cant figure out how to reply to previous thread, sorry :) Here is a modified fiddle: http://jsfiddle.net/q7EkY/7/

$scope.color = '';
$scope.size = '';
$scope.colors = function () {
    var colors = [];
    for (var i = 0; i < $scope.items.length; i++) {
       if (colors.indexOf($scope.items[i].colour) == -1) colors.push($scope.items[i].colour);
    }
    return colors;
};

$scope.sizes = function () {
    var sizes = [];
    for (var i = 0; i < $scope.items.length; i++) {
       if ((!$scope.color || $scope.items[i].colour == $scope.color) && sizes.indexOf($scope.items[i].size) == -1) sizes.push($scope.items[i].size);
    }
    return sizes;
}

$scope.doFilter = function () {
    var filter = {};
    if ($scope.color) filter.colour = $scope.color;
    if ($scope.size) filter.size = $scope.size;
    return filter;
}

Template:

<div ng-controller="myCtrl">
    <select ng-model="color" ng-options="c for c in colors()">
        <option value="">Colour</option>
    </select>
    <select ng-model="size" ng-options="s for s in sizes()">
        <option value="">Size</option>
    </select>
    <div ng-repeat="item in items | filter:by_colour | filter:doFilter()">
        {{ item.title }}
    </div>
</div>

I think there should be more clear way to filter values, using _.js, for example.

Upvotes: 2

Pythonic
Pythonic

Reputation: 11

You should create a filter function in your scope, and use it as an argument of "a | filter" Here is a short example of using this:

View:

<div ng-controller="myCtrl">
<div ng-repeat="item in items | filter:doFilter()">
    {{ item.title }}
</div>
<div>Is filter active? <input type="checkbox" ng-model="filterActive"/></div>

Controller:

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

myApp.controller('myCtrl', function ($scope) {
    $scope.items = [{
        title: 'First item',
        active: true
    }, {
        title: 'Second item',
        active: false
    }];
    $scope.doFilter = function () {
        if ($scope.filterActive) return { active: true };
        return {};
    }
});

http://jsfiddle.net/q7EkY/1/

Upvotes: 1

Related Questions