Guia de como trabalhar com checkbox no Angularjs

O problema

Quando começamos a trabalhar com checkbox no Angularjs, existe duas coisas que devemos ficar atentos, a primeira é que o seu checkbox deve ser um array e a segunda é que não basta você marcar checked no campo que o seu modelo não irá entender e você irá retornar nenhum valor para o servidor.

Retorno básico em JSON

Para esse nosso post, vamos imaginar que você buscou no banco de dados as informações e foi retornado o seguinte para a sua view do angular

// Faz uma busca no banco
$http.get('retorno.php')
.success(function(){

	// Associa o JSON em lista
	$scope.lista = data;

})
.error(function(){
	console.log('Não foi possível retornar seus dados')
});

Documentação: https://docs.angularjs.org/api/ng/service/$http#get

Como criar um checkbox em forma de array no Angularjs

Para criar um checkbox em forma de array que é o que precisamos já que vamos marcar vários valores, podemos fazer:

<div ng-repeat="item in lista">
	<input ng-model="modelo[item.id]" type="checkbox" id="item-">
	<label for="item-">Item</label>
</div>

Explicando o código:

  • lista: É um retorno JSON
  • modelo: Nome do seu modelo, é como você vai pegar na hora de puxar no lado servidor, igual como faziamos $_POST['modelo']

Como marcar checked com ng-checked

<div ng-repeat="item in lista">
	<input ng-model="modelo[item.id]" type="checkbox" id="item-" ng-checked="item.checked">
	<label for="item-">Item</label>
</div>

Explicando o código:

  • ng-checked: atributo do angularjs para checar o checkbox

Documentação: https://docs.angularjs.org/api/ng/directive/ngChecked

Como vincular o seu checked ao ng-model

angular.forEach(lista, function(item){
	if (item.checked)
	{
  		$scope.modelo[item.id] = item.checked;
	}
});

Explicando o código:

O angular assim como no PHP, tem uma condicional forEach, logo vamos passar item por item vendo item.checked que é um campo que criamos com true ou false, ele vai ser responsável por falar para o modelo que o checkbox associado a ele esta checado.

Documentação: https://docs.angularjs.org/api/ng/directive/ngModel