Angularjs checkbox multiple filter - angularjs

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;
};
});