Convalida casella di controllo Gruppo AngularJS

Ho una lista di caselle di controllo, di cui almeno una è obbligatoria. Ho cercato di ottenere questo risultato tramite la convalida di AngularJS, ma ho avuto un momento difficile. Di seguito è riportato il mio codice:

// 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          

Ecco il codice in plunker: http://plnkr.co/edit/Bz9yhSoPYUNzFDpfASwt?p=preview Qualcuno ha fatto questo su AngularJS? Rendendo necessarie le caselle di controllo, mi costringe a selezionare tutti i valori della casella di controllo. Anche questo problema non è documentato nella documentazione di AngularJS.

Se si desidera richiedere la selezione di almeno un elemento nel gruppo, è ansible definire l’attributo dinamico richiesto con ng-required .

Per i pulsanti radio di genere sarebbe facile:

  

Anche il gruppo di caselle di controllo sarebbe facile, se si è utilizzato l’array per memorizzare i frutti selezionati (basta controllare la lunghezza dell’array), ma con l’object è necessario controllare se uno qualsiasi dei valori è impostato su true con filtro o funzione nel controller:

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

Aggiornare:

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

Inoltre, tieni presente che restituirà false se il valore è 0.

Grazie a Klaster_1 per la risposta accettata. Ho costruito su questo utilizzando ng-change sugli input della casella di controllo per impostare una variabile scope locale, che verrebbe utilizzata come espressione ng-required . Ciò impedisce l’esecuzione di someSelected() su ogni digest.

Ecco un plunkr che lo dimostra: http://embed.plnkr.co/ScqA4aqno5XFSp9n3q6d/

Ecco l’HTML e JS per i posteri.

 < !DOCTYPE html>        

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

Va bene forse molto tardi alla festa, ma se hai una serie di oggetti che stai guardando, la soluzione di controllare solo la lunghezza della matrice di oggetti selezionati ha funzionato per me.
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]; } } } 

Capisco cosa sta succedendo in questa soluzione che stai controllando tutte le opzioni della casella di controllo per sapere quale è stato cliccato. Ma da quello che so questa è di gran lunga la soluzione più semplice (da capire e implementare) e funziona come un fascino se sai che le tue opzioni saranno limitate. Per una soluzione più ottimizzata per il tempo. Controlla le risposte sopra.

Siamo in grado di soddisfare le vostre esigenze senza attraversare tutte le istanze delle caselle di controllo. Ecco il codice di esempio

  

Qui sto avvolgendo la funzione javascript eval nella funzione “e” per accedervi.

 


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