AngularJS组checkboxvalidation
我有一个checkbox的列表，其中至less有一个是强制性的。 我试图通过AngularJSvalidation来实现这一点，但是很难。 以下是我的代码：
// 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>
这里是plunker中的代码： http ://plnkr.co/edit/Bz9yhSoPYUNzFDpfASwt?p=preview有没有人在AngularJS上做过这个？ 使checkbox需要，迫使我select所有checkbox的值。 这个问题在AngularJS文档中也没有logging。
如果您想要select组中的至less一个项目，可以使用ng-required定义dynamic必需属性。
对于性别单选button，这很容易：
<input type="radio" ng-model="formData.selectedGender" value="{{val.id}}" ng-required="!formData.selectedGender" >
checkbox组也很容易，如果你使用数组来存储选中的水果（只是检查数组的长度），但是对于有控制器中的filter或函数来检查是否有值被设置为true是必要的。
$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)" >
更新：
const someSelected = (object = {}) => Object.keys(object).some(key => object[key])
另外请记住，如果值为0，它将返回false。
感谢Klaster_1接受的答案。 我已经通过在checkboxinput上使用ng-change来构build一个本地作用域variables，它将用作ng-requiredexpression式。 这可以防止在每个摘要上运行someSelected() 。
这里是一个演示这个： http ：//embed.plnkr.co/ScqA4aqno5XFSp9n3q6d/
这是后代的HTML和JS。
<!DOCTYPE html> <html ng-app="App"> <head> <meta charset="utf-8" /> <script data-require="angular.js@1.4.9" 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(); });
好的，对派对来说可能很晚，但是如果你有一系列你正在看的对象，那么只需要检查所选对象数组长度的解决scheme就可以适用于我。
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]; } } }
我明白在这个解决scheme中发生了什么，你正在检查所有的checkbox选项，以知道哪一个被点击。 但是根据我所知，这是迄今为止最简单的解决scheme（理解和实施），如果你知道你的select将受到限制，它就像一个魅力。 为更多的时间优化的解决scheme。 检查上面的答案。
我们可以在不遍历所有checkbox实例的情况下实现您的需求。 这里是示例代码
<script> angular.module('atLeastOneExample', []) .controller('ExampleController', ['$scope', function($scope) { $scope.e = function(s){ eval(s); }; }]); </script>
在这里我正在包装javascript eval函数在“e”函数来访问它。
<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>
