0
\$\begingroup\$

I'm very new to Angular, and trying to get my head around whether or not I'm doing it the Right Way (tm).

I want to filter a set of results by their properties, where if none of the filters are checked, all the results are displayed, but if one or more filters are checked, all results which match the checked properties are displayed.

I've setup a simple demo with the colours of fruit. The JSFiddle is available at http://jsfiddle.net/mattdwen/u5eBH/2/

The HTML has a series of checkboxs and a repeating list for the set results:

<div ng-app="fruit">
    <div ng-controller="FruitCtrl">

        <input type="checkbox" ng-click="includeColour('Red')"/> Red</br/>
        <input type="checkbox" ng-click="includeColour('Orange')"/> Orange</br/>
        <input type="checkbox" ng-click="includeColour('Yellow')"/> Yellow</br/>

        <ul>
            <li ng-repeat="f in fruit | filter:colourFilter">
                {{f.name}}
            </li>
        </ul>

        Filter dump: {{colourIncludes}}
    </div>
</div>

And the JS adds the checked properties to a scope array, and the filter checks if the fruit colour is in that array:

'use strict'

angular.module('fruit', []);

function FruitCtrl($scope) {
    $scope.fruit = [
        {'name': 'Apple', 'colour': 'Red'},
        {'name': 'Orange', 'colour': 'Orange'},
        {'name': 'Banana', 'colour': 'Yellow'}];

    $scope.colourIncludes = [];

    $scope.includeColour = function(colour) {
        var i = $.inArray(colour, $scope.colourIncludes);
        if (i > -1) {
            $scope.colourIncludes.splice(i, 1);
        } else {
            $scope.colourIncludes.push(colour);
        }
    }

    $scope.colourFilter = function(fruit) {
        if ($scope.colourIncludes.length > 0) {
            if ($.inArray(fruit.colour, $scope.colourIncludes) < 0)
                return;
        }

        return fruit;
    }
}

It doesn't really feel 'Angular' enough to be the correct way to achieve this?

\$\endgroup\$
  • \$\begingroup\$ I don't have the rep to create an 'Angular' tag unfortunately. \$\endgroup\$ – mattdwen Mar 17 '13 at 23:28
6
\$\begingroup\$

You're attempting to handle the data binding yourself by creating arrays to store objects based on the click event. Angular does the two way binding for you.

Basically, I assign a new property named "included" by assigning it as the model to the input checkbox. Then I use that property on the filter of the fruit array to display only the one's whose colour is selected.

<div ng-app="fruit">
    <div ng-controller="FruitCtrl">
        <div ng-repeat="f in fruit">
            <input type='checkbox' ng-model='f.included'></input>{{f.colour}}
        </div>
        <ul>
            <li ng-repeat="f in fruit | filter:{included:true}">{{f.name}}</li>
        </ul>
</div>


angular.module('fruit', []);

function FruitCtrl($scope) {
    $scope.fruit = [
        {'name': 'Apple', 'colour': 'Red'},
        {'name': 'Orange', 'colour': 'Orange'},
        {'name': 'Banana', 'colour': 'Yellow'}
    ];
}
\$\endgroup\$
  • \$\begingroup\$ What if $scope.fruit contains duplicate elements. it will break I think \$\endgroup\$ – niran Sep 29 '14 at 16:49
  • \$\begingroup\$ Your answer is very good, but it not working as it asked: "if none of the filters are checked, all the results are displayed..." \$\endgroup\$ – Damjan Pavlica Aug 6 '15 at 18:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.