Validação da checkbox de seleção do grupo AngularJS

Eu tenho uma lista de checkboxs de seleção, das quais pelo menos uma é obrigatória. Eu tentei conseguir isso através da validação AngularJS, mas tive um tempo difícil. Abaixo está o meu código:

// Code goes here for js var app = angular.module('App', []); function Ctrl($scope) { $scope.formData = {}; $scope.formData.selectedGender = ''; $scope.gender = [{ 'name': 'Male', 'id': 1 }, { 'name': 'Female', 'id': 2 }]; $scope.formData.selectedFruits = {}; $scope.fruits = [{ 'name': 'Apple', 'id': 1 }, { 'name': 'Orange', 'id': 2 }, { 'name': 'Banana', 'id': 3 }, { 'name': 'Mango', 'id': 4 }, ]; $scope.submitForm = function() { } } 
 // Code goes here for html          
What would you like?
{{val.name}}

{{val.name}}

{{formData.selectedFruits}}

Aqui está o código no plunker: http://plnkr.co/edit/Bz9yhSoPYUNzFDpfASwt?p=preview Alguém já fez isso no AngularJS? Fazendo as checkboxs de seleção necessárias, obriga-me a selecionar todos os valores da checkbox de seleção. Esse problema também não está documentado na documentação do AngularJS.

Se você quiser exigir pelo menos um item no grupo que está sendo selecionado, é possível definir o atributo obrigatório dynamic com ng-required .

Para botões de rádio de gênero, isso seria fácil:

  

O grupo de checkbox de seleção também seria fácil, se você usasse array para armazenar frutas selecionadas (apenas verifique o tamanho da matriz), mas com o object é necessário verificar se algum dos valores está definido como true com filter ou function no controller:

 $scope.someSelected = function (object) { return Object.keys(object).some(function (key) { return object[key]; }); } 
  

Atualizar:

 const someSelected = (object = {}) => Object.keys(object).some(key => object[key]) 

Também tenha em mente que ele retornará false se o valor for 0.

Obrigado ao Klaster_1 pela resposta aceita. Eu construí sobre isso usando ng-change nas inputs da checkbox de seleção para definir uma variável de escopo local, que seria usada como a expressão ng-required . Isso impede a execução de someSelected() em cada resumo.

Aqui está um plunkr demonstrando isso: http://embed.plnkr.co/ScqA4aqno5XFSp9n3q6d/

Aqui está o HTML e o JS para a posteridade.

         

What would you like?

{{fruit.name}}

You must choose one fruit

Fruits model: {{formData.selectedFruits | json}}

 angular .module('App', []) .controller('AppCtrl', function($scope) { var selectedFruits = { Mango: true }; var calculateSomeSelected = function() { $scope.someSelected = Object.keys(selectedFruits).some(function(key) { return selectedFruits[key]; }); }; $scope.formData = { selectedFruits: selectedFruits }; $scope.fruits = [{ 'name': 'Apple' }, { 'name': 'Orange' }, { 'name': 'Banana' }, { 'name': 'Mango' }]; $scope.checkboxChanged = calculateSomeSelected; calculateSomeSelected(); }); 

Ok, talvez muito tarde para a festa, mas se você tem uma matriz de objects que você está olhando, a solução de apenas verificar o comprimento da matriz de objects selecionados funcionou para mim.
HTML

 
{{vehicle.model}} {{vehicle.brand}} {{vehicle.geofenceName}}

JS

 $scope.vehicles = [{},{}] // Your array of objects; $scope.car = { ids: {}, objects: [] }; $scope.$watch(function() { return $scope.car.ids; }, function(value) { $scope.car.objects = []; angular.forEach($scope.car.ids, function(value, key) { value && $scope.car.objects.push(getCategoryById(key)); }); }, true); function getCategoryById(id) { for (var i = 0; i < $scope.vehicles.length; i++) { if ($scope.vehicles[i]._id == id) { return $scope.vehicles[i]; } } } 

Eu entendo o que está acontecendo nesta solução que você está verificando todas as opções da checkbox de seleção para saber qual deles é clicado. Mas pelo que sei, esta é de longe a solução mais fácil (para entender e implementar) e funciona como um encanto se você sabe que suas opções serão limitadas. Para uma solução otimizada mais tempo. Confira as respostas acima.

Podemos alcançar sua exigência sem atravessar todas as instâncias de checkboxs de seleção. Aqui está o código de exemplo

  

Aqui estou embrulhando javascript function eval na function “e” para acessá-lo.

 


value = {{checkboxModel.value}}
isAtLeastOneChecked = {{c>0}}