Контроллер
watchesStoreControllers.controller('HomeCtrl', ['$scope', 'Watch',
function($scope, Watch) {
// данные
$scope.watches = Watch.query();
// вывод выбранных критериев из фильтра(список того что выбрали в фильтре)
$scope.resultIncludes = [];
// определил для каждого чекбокса переменную в ng-model , но при нажатии
// на чекбокс - false на true не меняет,
// я должен это сделать сам в контроллере после события в чекбоксе?
$scope.tag = false;
$scope.zen = false;
$scope.iwc = false;
// функция для вывода выбранных критериев из фильтра
$scope.includeBrand = function(brand) {
var i = $.inArray(brand, $scope.resultIncludes);
if (i > -1) {
$scope.resultIncludes.splice(i, 1);
} else {
$scope.resultIncludes.push(brand);
}
}
// отфильтровывает и выводит часы на страницу
$scope.checkboxFilter = function(watches) {
if ($scope.resultIncludes.length > 0) {
if ($.inArray(watches.brand, $scope.resultIncludes) < 0)
return;
}
return watches;
}
// проверяет, если хоть один критерий выбран, удаляет только список критериев,
// хочу добавить здесь отключение всех чекбоксов
$scope.resetFilter = function () {
if($scope.resultIncludes[0]) {
$scope.resultIncludes.splice(0, $scope.resultIncludes.length);
}
}
}
]);
В HTML(для краткости, расширение jade) чекбоксы и вывод часов(товаров)
<--! фильтр-->
ul
li
input(type="checkbox" id="check_tag" ng-model='tag' class="css-checkbox")
label(for='check_tag' class="css-label") TAG Heuer
li
input(type="checkbox" id="check_zenith" ng-model='zen' class="css-checkbox")
label(for='check_zenith' class="css-label") ZENITH
li
input(type="checkbox" id="check_iwc" ng-model='iwc' class="css-checkbox")
label(for='check_iwc' class="css-label") IWC
// отключаем чекбоксы и стираем выбранные критерии поиска
button( ng-click='resetFilter()')
<--! список товаров-->
ul
li(ng-repeat="watch in watches | filter:q | filter:checkboxFilter")
a(ng-href="/{{watch.id}}")
img(ng-src="{{watch.imageUrl}}", alt="{{watch.name}}", class="images")
// массив данных
[
{
"id": "Monaco-Twenty-Four-McQueen",
"imageUrl": "img/watches/CAL5111.FC6299.jpg",
"brand":"TAG Heuer",
"name":"Monaco Twenty Four McQueen",
"mech":"Calibre 36, механика с автоподзаводом"
},
{
"id": "Aquaracer-500-M-Calibre-5-Day-Date",
"imageUrl": "img/watches/WAJ2180.FT6015.jpg",
"brand":"LONGINES",
"name":"Aquaracer 500 M Calibre 5 Day-Date",
"mech":"Calibre 5 Day-Date, механика с автоподзаводом"
},
{
"id": "Aquaracer-Calibre-16-Day-Date",
"imageUrl": "img/watches/CAF5011.BA0815.jpg",
"brand":"TAG Heuer",
"name":"Aquaracer Calibre 16 Day-Date",
"mech":"Calibre 16 Day-Date, механика с автоподзаводом"
}
]