Javascript 在 AngularJS 中使用复选框和必需
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13567235/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using checkboxes and required with AngularJS
提问by Tryggve
I've tried to use the html5 requiredattribute for my group of checkboxes but I don't find a nice way to implement it with ng-form.
我尝试将 html5required属性用于我的复选框组，但我没有找到用 ng-form 实现它的好方法。
When a checkbox is checked I want the value of that input-element to be pushed to an array of values.
当复选框被选中时，我希望将该输入元素的值推送到一个值数组。
The angular required validator seems to watch the ng-model associated with the input element, but how can I link several checkboxes to the same model and update it's value with the value of the input field?
angular required 验证器似乎监视与输入元素关联的 ng-model，但是如何将多个复选框链接到同一个模型并使用输入字段的值更新它的值？
Right now the implementation is like this fiddle.
现在的实现就像这个 fiddle。
<div ng-controller="myCtrl">
<ng-form name="myForm">
<span ng-repeat="choice in choices">
<label class="checkbox" for="{{choice.id}}">
<input type="checkbox" required="required" value="{{choice.id}}" ng-click="updateQuestionValue(choice)" ng-model="choice.checked" name="group-one" id="{{choice.id}}" />
{{choice.label}}
</label>
</span>
<input type="submit" value="Send" ng-click="submitSurvey(survey)" ng-disabled="myForm.$invalid" />
</ng-form>
</div>?
The updateQuestionValue-function handles the adding or removing from the array of values but each checkbox has it's own model and that is why each checkbox needs to be checked in order for the form to be valid.
updateQuestionValue 函数处理从值数组中添加或删除的操作，但每个复选框都有自己的模型，这就是为什么需要选中每个复选框以使表单有效的原因。
I've got it to work on a group of radio buttons, but they all work on the same model as only one can be selected.
我已经让它在一组单选按钮上工作，但它们都在同一个模型上工作，因为只能选择一个。
采纳答案by tocallaghan
If you want the submit button disabled if no choice is selected the easiest way is to check the length of the array in the ng-disabled attribute, without setting the required attribute
如果您希望在没有选择的情况下禁用提交按钮，最简单的方法是检查 ng-disabled 属性中数组的长度，而不设置 required 属性
<input type="submit" value="Send" ng-click="submitSurvey(survey)"
ng-disabled="value.length==0" />
Another way to do this would be to check the array length in the ng-required attribute of the checkboxes
另一种方法是检查复选框的 ng-required 属性中的数组长度
<input type="checkbox" value="{{choice.id}}" ng-click="updateQuestionValue(choice)"
ng-model="choice.checked" name="group-one" id="{{choice.id}}"
ng-required="value.length==0" />
回答by Shaz
I just added a hidden input with ng-model that's the same as your ng-model for the radio button:
我刚刚使用 ng-model 添加了一个隐藏输入，它与单选按钮的 ng-model 相同：
<div class="radio" ng-repeat="option in item.AnswerChoices | orderBy: DisplayOrder">
<input type="radio" ng-model="item.Answer" name="mulchoice" value="{{option.DisplayName}}" />
<span>{{option.DisplayName}}</span>
<input type="hidden" ng-model="item.Answer" name="hiddenradiobuttoninput" required/>
</div>
回答by Ben Lesh
A few things:
一些东西：
- I would go with an approach that just updated the entire array in this case, as it would simplify the code a little. (You might not want to do this if you're doing anything stateful with the $scope.value array contents, but it doesn't look like you are).
- you can just use
<form>rather than<ng-form>. - move the submit function off of the button's
ng-clickand into the form'sng-submit. This makes validation management a little easier with angular's built-in validation (if you care about that) - If your
<label>wraps your<input>you don't need thefor=""attribute.
- 在这种情况下，我会采用一种仅更新整个数组的方法，因为它会稍微简化代码。（如果您正在对 $scope.value 数组内容做任何有状态的事情，您可能不想这样做，但它看起来不像）。
- 你可以只使用
<form>而不是<ng-form>. - 将提交功能从按钮
ng-click移到表单的ng-submit. 这使得通过 angular 的内置验证进行验证管理更容易一些（如果你关心的话） - 如果您
<label>包装了您<input>，则不需要该for=""属性。
Here is an updated fiddle for you
And here's the code:
这是代码：
<div ng-controller="myCtrl">
<form name="myForm" ng-submit="submitSurvey(survey)">
<span ng-repeat="choice in choices">
<label class="checkbox">
<input type="checkbox" required="required" value="{{choice.id}}" ng-change="updateQuestionValues()" ng-model="choice.checked" name="group-one" />
{{choice.label}}
</label>
</span>
<input type="submit" value="Send" ng-disabled="myForm.$invalid" />
</form>
{{value}}
</div>?
JS
JS
function myCtrl($scope) {
$scope.choices = [{
"id": 1,
"value": "1",
"label": "Good"},
{
"id": 2,
"value": "2",
"label": "Ok"},
{
"id": 3,
"value": "3",
"label": "Bad"}];
$scope.value = [];
$scope.updateQuestionValues = function() {
$scope.value = _.filter($scope.choices, function(c) {
return c.checked;
});
};
}?
回答by johans
Why not make your checkbox models the array
为什么不让您的复选框模拟数组
<input type="checkbox" ng-model="value[$index]" value="{{choice.id}}/>
Fiddle: http://jsfiddle.net/thbkA/1/
回答by Ali Adravi
<ul class="list-group">
<li ng-repeat='animal in animals' class="list-group-item">
<label>
<input type="checkbox"
ng-model="xyx"
ng-click="toggleAnimal(animal)"
ng-checked="selectedAnimals.indexOf(animal) > -1"
ng-required="selectedAnimals.length == 0" />
{{animal}}</label>
</li>
</ul>
$scope.toggleAnimal = function(animal){
var index = $scope.selectedAnimals.indexOf(animal);
if(index == -1) {
$scope.selectedAnimals.push(animal);
}
else{
$scope.selectedAnimals.splice(index, 1);
}
}
See the full detail and demo and other related examples
查看完整的细节和演示以及其他相关示例
