AngularJS kelompok kotak centang validasi
Saya memiliki daftar periksa kotak, yang setidaknya satu adalah wajib. Saya telah mencoba untuk mencapai hal ini melalui AngularJS validasi, tetapi memiliki waktu yang sulit. Di bawah ini adalah kode saya:
// 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
<!doctype html>
<html ng-app="App">
<head>
<!-- css file -->
<!--App file -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
<!-- External file -->
</head>
<body>
<div ng-controller="Ctrl">
<form class="Scroller-Container">
<div ng-app>
<form class="Scroller-Container" ng-submit="submit()" ng-controller="Ctrl">
<div>
What would you like?
<div ng-repeat="(key, val) in fruits">
<input type="checkbox" ng-model="formData.selectedFruits[val.id]" name="group[]" id="group[{{val.id}}]" required />{{val.name}}
</div>
<br />
<div ng-repeat="(key, val) in gender">
<input type="radio" ng-model="$parent.formData.selectedGender" name="formData.selectedGender" id="{{val.id}}" value="{{val.id}}" required />{{val.name}}
</div>
<br />
</div>
<pre>{{formData.selectedFruits}}</pre>
<input type="submit" id="submit" value="Submit" />
</form>
</div>
<br>
</form>
</div>
</body>
</html>Berikut ini adalah kode di plunker: http://plnkr.co/edit/Bz9yhSoPYUNzFDpfASwt?p=preview Telah ada yang melakukan ini pada AngularJS? Membuat checkbox yang dibutuhkan, memaksa saya untuk pilih semua kotak centang nilai-nilai. Masalah ini juga tidak didokumentasikan dalam AngularJS dokumentasi.
Jika anda ingin memerlukan setidaknya satu item dalam kelompok yang sedang dipilih,'s mungkin untuk menentukan dinamis diperlukan atribut dengan ng-diperlukan.
Untuk jenis kelamin tombol radio ini akan menjadi mudah:
<input
type="radio"
ng-model="formData.selectedGender"
value="{{val.id}}"
ng-required="!formData.selectedGender"
>Centang kelompok akan mudah juga, jika anda menggunakan array untuk menyimpan buah-buahan yang dipilih (hanya memeriksa hotel yang panjang), tapi dengan objek itu's diperlukan untuk memeriksa apakah ada nilai-nilai yang ditetapkan untuk berlaku dengan filter atau fungsi di controller:
$scope.someSelected = function (object) {
return Object.keys(object).some(function (key) {
return object[key];
});
}<input
type="checkbox"
value="{{val.id}}"
ng-model="formData.selectedFruits[val.id]"
ng-required="!someSelected(formData.selectedFruits)"
>Update:
const someSelected = (object = {}) => Object.keys(object).some(key => object[key])Juga perlu diingat bahwa itu akan mengembalikan false jika nilai adalah 0.
Terima kasih untuk Klaster_1 untuk jawaban yang diterima. I've dibangun ini dengan menggunakan ng-change pada kotak input untuk menetapkan lingkup lokal variabel, yang akan digunakan sebagai ng-diperlukan ekspresi. Hal ini untuk mencegah menjalankan someSelected() pada setiap dicerna.
Berikut ini adalah plunkr menunjukkan ini: http://embed.plnkr.co/ScqA4aqno5XFSp9n3q6d/
Berikut ini adalah HTML dan JS untuk anak cucu.
<!DOCTYPE html>
<html ng-app="App">
<head>
<meta charset="utf-8" />
<script data-require="[email protected]" data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="AppCtrl">
<form class="Scroller-Container" name="multipleCheckbox" novalidate="">
<h3>What would you like?</h3>
<div ng-repeat="fruit in fruits">
<input type="checkbox" ng-model="formData.selectedFruits[fruit.name]" ng-change="checkboxChanged()" ng-required="!someSelected" /> {{fruit.name}}
</div>
<p style="color: red;" ng-show="multipleCheckbox.$error.required">You must choose one fruit</p>
</form>
<pre>Fruits model:
{{formData.selectedFruits | json}}</pre>
</div>
</body>
</html>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();
});Oke mungkin sangat terlambat ke pesta tapi jika anda memiliki sebuah array dari objek yang anda lihat, solusinya hanya memeriksa panjang dari array dari objek yang dipilih bekerja untuk saya. HTML
<div ng-repeat="vehicle in vehicles">
<input type="checkbox" name="car" ng-model="car.ids[vehicle._id]" ng-required=" car.objects.length <= 0"> {{vehicle.model}} {{vehicle.brand}} <b>{{vehicle.geofenceName}}</b>
</div>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];
}
}
}Saya memahami apa yang terjadi dalam larutan ini bahwa anda memeriksa semua kotak centang opsi untuk tahu mana yang diklik. Tapi dari apa yang saya tahu ini adalah jauh cara termudah solusi(untuk memahami dan menerapkan) dan bekerja seperti pesona jika anda tahu bahwa pilihan anda akan terbatas. Untuk waktu yang lebih dioptimalkan solusi. Memeriksa jawaban di atas.
Kita bisa mencapai kebutuhan anda tanpa melintasi semua check-kotak instance. Berikut ini adalah contoh kode
<script>
angular.module('atLeastOneExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.e = function(s){
eval(s);
};
}]);
</script>Di sini saya pembungkus javascript fungsi eval di "e" fungsi untuk mengaksesnya.
<form name="myForm" ng-controller="ExampleController" ng-init="c=0">
<label>
Value1: <input type="checkbox" ng-model="checkboxModel.value[0]" ng-change="e('($scope.checkboxModel.value[0])?$scope.c++:$scope.c--')"/>
</label><br/>
<label>
Value2: <input type="checkbox" ng-model="checkboxModel.value[1]" ng-change="e('($scope.checkboxModel.value[1])?$scope.c++:$scope.c--')"/>
</label><br/>
value = {{checkboxModel.value}}<br/>
isAtLeastOneChecked = {{c>0}}
</form>
