Angularjs checkbox multiple filter

Question

I have factory, that send request to get some data. After responce, i will receive it in controller and create scope list. Than i must to filter this list by checking checkboxes. I'v receive results, but they not visible. Help me pls...

$scope.checkRooms = [];
    $scope.filterRooms = function(app) {

        return function(p) {
            for (var i in $scope.checkRooms) {

                if (p.rooms == $scope.uniqueRooms[i] && $scope.checkRooms[i]) {
                    return true;
                } 
            }
        };
    };

UPDATE 2 Here is working fiddle . Now how to sort by ASC rooms numbers? "orderBy" function sort correct but rooms indexes sort wrong

Answer 1

Ok here's a slightly different approach whereby the filtering is done in the controller rather than using the filter:expression in your ng-repeat.

Not the only way to do it but I think you should definitely think about removing any watch functions from your controllers they make it really difficult to test your controllers.

Fiddle

HTML

<div class="filter-wrap" ng-controller="mainController">

    <div class="main-filter">
        <div class="form-group">
            <span class="gr-head">
                Rooms count
            </span>

            <div class="check-control" ng-repeat="room in uniqueRooms | orderBy: room">
                <input 
                    type="checkbox" 
                    name="room_cnt" 
                    ng-model="checkboxes[room]" 
                    ng-change='onChecked(filterRoom)' 
                />
                <label>{{room}}</label>
            </div>                          
        </div>

    </div>

    <table>
        <thead>
            <tr>
                <th>
                    <span>Rooms</span>
                </th>
                <th>
                    <span>Size</span>
                </th>       
                <th>
                    <span>Price</span>
                </th>                                
            </tr>
        </thead>

        <tbody>
            <tr ng-repeat="app in filteredApps">
                <td>{{app.rooms}}</td>
                <td>{{app.size}}</td>
                <td>{{app.price}}</td>
            </tr>
        </tbody>
    </table>

    <div class="result">
        <h2>SCOPE size</h2>
        {{filteredRooms}}
    </div>

</div>

JS

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

sortApp.controller('mainController', function($scope, $timeout) {

    $scope.apps = [
        {
            "rooms": 2,
            "size": 55.50,
            "price": 55500.00,
        },
        {
            "rooms": 1,
            "size": 25.50,
            "price": 45000.00,
        },
        {
            "rooms": 8,
            "size": 28,
            "price": 15500.00,
        },
        {
            "rooms": 1,
            "size": 28,
            "price": 15500.00,
        },
        {
            "rooms": 8,
            "size": 28,
            "price": 15500.00,
        },
        {
            "rooms": 3,
            "size": 120.55,
            "price": 88990.00,
        },
        {
            "rooms": 3,
            "size": 120.55,
            "price": 88990.00,
        }
    ];

    $scope.filteredApps    = $scope.apps;
    $scope.uniqueRooms     = uniqueItems($scope.apps, 'rooms');
    $scope.onChecked       = filterRooms;
    $scope.checkboxes      = createCheckboxes($scope.uniqueRooms);

    function filterRooms(checkboxes){

        $scope.filteredApps = [];

        angular.forEach($scope.apps, function(app){

            if($scope.checkboxes[app.rooms]){
                $scope.filteredApps.push(app);
            }

        });

    }

    function createCheckboxes(labels){

        var checkboxes = {};

        angular.forEach(labels, function(label){
            checkboxes[label] = true;
        });

        return checkboxes;
    }

    function uniqueItems(data, key) {

        var result = [];

        for (var i = 0; i < data.length; i++) {
            var value = data[i][key];

            if (result.indexOf(value) == -1) {
                result.push(value);
            }

        }
        return result;
    };


});