Как, отключить все чекбоксы, в AngularJS?

Есть теги li, в них input-ы с атрибутами ng-checked с переменными valueReset, кнопка сброса чекбоксов с атрибутом ng-model="valueReset".
В контроллере, для кнопки сброса я указываю переменной valueReset false
$scope.resetFilter = function () {
	$scope.valueReset = false;
}


<button ng-model="valueReset" ng-click='resetFilter()'> отчистить фильтр</button>

<li>
    <input type="checkbox" ng-checked="valueReset" id="check_tag" />
    <label for='check_tag'> TAG Heuer</label>
</li>
 <li>
    <input type="checkbox" ng-checked="valueReset" id="check_iwc" />
    <label for='check_iwc'> IWC</label>
</li>
<li>
    <input type="checkbox" ng-checked="valueReset" id="check_rado" />
    <label for='check_rado'> RADO</label>
</li>

при нажатии на кнопку, очищает в первый раз, затем игнорирует - нужно перегружать страницу заново. Как отключить чекбоксы правильно? Может необходимо подключать атрибуты ngChange, ngValue и т.п.?
Заранее спасибо
  • Вопрос задан
  • 2889 просмотров
Пригласить эксперта
Ответы на вопрос 2
VyacheslavPopov
@VyacheslavPopov Автор вопроса
Контроллер

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, механика с автоподзаводом"
	}
]
Ответ написан
Комментировать
@Demetros
Если вы хотите управлять состоянием чекбоксов в контроллере, то каждый чекбокс через ng-model должен быть связан с переменной в скоупе контроллера. Установка переменной в true включает чекбокс, установка в false - выключает.
В вашем примере массива нет никаких ключей для индикации состояния чекбокса, поэтому я плохо понимаю, как вы собираетесь узнать состояние чекбокса в дальнейшем.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы