AngularJS组复选框验证
我有一个复选框列表，其中至少一个是强制性的。我试图通过AngularJS验证来实现这一点，但是很难。下面是我的代码：
// 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上做到这一点？使复选框成为必需，迫使我选择所有复选框值。AngularJS文档中也未记录此问题。
问题答案：
如果要选择组中的至少一项，则可以使用 ng-required* 定义动态的 required 属性。 *
对于性别单选按钮，这很容易：
<input
type="radio"
ng-model="formData.selectedGender"
value="{{val.id}}"
ng-required="!formData.selectedGender"
>
如果使用数组存储选定的水果（只需检查数组长度），复选框组也将很容易，但是对于对象，有必要检查是否使用控制器中的过滤器或函数将任何值设置为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])
另外请记住，如果value为0，它将返回false。
-
我在XAML有一个组合框，写为 并且“”在ViewModel类中实现为 在这里设置之前，它会根据某些条件进行验证。我的目的是在验证失败时将组合框选择更改为先前的值。这不适用于组合框，但是此方法非常适用于CheckBox控件——下面给出的代码片段。 有什么方法可以让这个为ComboBox工作吗？任何替代实现也可以。
-
问题内容： 我有以下代码，通过检查球员的裤子大小复选框，尝试对阵列中的球员进行过滤。 我知道我在转发器中有数据数组，然后在数据数组元素（两个不同的div）之外的元素中过滤输入，这可能是导致断开连接的原因吗？因为当我将复选框添加到Repeater元素时我注意到，所以当我单击复选框时，确实会得到某种形式的反馈数组。 绑定搜索输入框非常容易实现，但是我花了太多时间获取这个简单的复选框来过滤数据。 因此，
-
问题内容： 我想过滤结果。 有一个葡萄酒清单，我的愿望是当未选中任何复选框时，将显示整个葡萄酒清单。 当仅选中1个复选框时，显示相关类别 当选中多个复选框时，将显示相关类别 我是AngularJS的新手，我尝试了ng-model都没有成功，这是没有与函数关联的ng-model的代码： 如何使用ng-model或ng-change将功能与每个复选框按钮相关联以具有实时过滤模型？ 问题答案： 只是添加
-
复选框组就是一组复选框，主要用来选择一组可选项；有垂直和水平两种样式。 示例 垂直排列 默认就是垂直排列样式 <cube-checkbox-group v-model="checkList" :options="options" /> export default { data() { return { checkList: ['1', '4'], optio
-
问题内容： 通过某种方式，通过Angular的魔力，如果您使用并提供一个布尔值，则如果布尔值是true，则您的复选框将被选中，如果布尔值是true，则未选中。 尽管仅此一项就让人感到莫名其妙，但我实际上是在尝试反转选中状态，因为与todo示例不同，后者意味着选中了复选框，而我的模型更像。 不幸的是，我的第一个猜测没有用： 我所处的位置已经决定了模型，因此我无法更改它，也不必在客户端上对其进行按摩（
-
问题内容： 我一直在尝试AngularJS e2e测试， 并且在确定是否选中复选框时陷入困境。 我用端为端测试复选框输入作为样品（见 端对端测试 中的标签 实施例 ）。 HTML片段： 控制器代码段： 这是我尝试过的： 1） 只要在屏幕上显示，它就可以在样品首尾测试中起作用。如果您在本地测试并删除`{{value1}}，则绑定测试将失败。在我的大多数实际示例中，我并未在屏幕上的任何位置显示复选框值