使用AngularJs提交后如何验证复选框是否被选中？

Question

我的第一个应用程序使用的是AngularJs和Javascript。 我试图将来自API的信息显示为复选框。 现在它正在工作，但是，如何验证是否有一个提交按钮选中了任何复选框选项？

我在这里在stackoverflow中搜索并找到了一种方法，但是它仅与最后一个选项一起使用。 这是我的html的一部分：

<form name="imtesting" ng-submit="imtesting.$valid && validate()" ng-show="$ctrl.coupons.length > 0">


<ul>
    <li ng-repeat="c in $ctrl.coupons">
    <input type="checkbox"
           name="couponBox"
           ng-checked="c.Select"
           ng-click="$ctrl.selectOne(c)"
           ng-model="formData.couponBox" required/>{{c.CodeCoupon}}
        <br>
    </li>
</ul>
<span ng-show="submitted == true && imtesting.couponBox.$error.required">Select at least one cupon!</span></form>

和按钮：

<button type="submit" ng-click="submitted = true">Save</button>

希望您能够帮助我。 这份工作对我来说是一个新世界。

提前感谢。

Answer 1

好吧，为什么不在您的控制器上创建一个验证功能。 遍历所有优惠券对象，并检查它们是否具有值。 例如

$scope.requireCoupon = function() {
    var nrCouponsChecked = 0;
    $ctrl.coupons.forEach(function(coupon) {
        if (coupon.Select) {
            nrCouponsChecked++; 
        }
    });
}
// and in your template you would use it like

<span ng-show="submitted == true && requireCoupon()">Select at least one cupon!</span>

Answer 2

这是因为您通过执行以下操作为所有复选框使用了相同的ng-model ：

ng-model="formData.couponBox"

前面的代码为所有复选框设置了ng-model （ formData.couponBox ）。

一个有效的选项是创建一个对象，其中将包含每个复选框的ng-model ，例如这样（带有一些虚假数据的演示）

 angular .module('app', []) .controller("myCtrl", function() { var wizard = this; wizard.$ctrl = { //fake data coupons: [{ Select: false, CodeCoupon: "1st" }, { Select: false, CodeCoupon: "2nd" }], //create an object for storing the checkbox models checkBoxModels: {}, checkIfAnyChecked: checkIfAnyChecked } return wizard.$ctrl; function checkIfAnyChecked() { for (var k in wizard.$ctrl.checkBoxModels) { if (wizard.$ctrl.checkBoxModels.hasOwnProperty(k) && wizard.$ctrl.checkBoxModels[k]) { //for instance, if 3rd checkbox is checked, wizard.$ctrl.checkBoxModels will be {3: true} and so on... return true; } } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script> <div ng-app="app" ng-controller="myCtrl as ctrl"> <ul> <li ng-repeat="c in ctrl.coupons"> <input type="checkbox" name="couponBox" ng-checked="c.Select" ng-click="ctrl.selectOne(c)" ng-model="ctrl.checkBoxModels[$index]" required/>{{c.CodeCoupon}} <br> </li> </ul> <span ng-show="submitted == true && !ctrl.checkIfAnyChecked()">Select at least one cupon!</span> <br /> <button type="submit" ng-click="submitted = true">Save</button> </div>

Answer 3

您必须为每个复选框输入创建动态名称才能进行验证。

这是一个示例，因为您没有提供数据集。

 var app=angular.module("App",[]); 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(); });

 <!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="" ng-submit="submitForm()"> <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="true" name="fruits_{{$index}}" /> {{fruit.name}} <p style="color: red;" ng-show="multipleCheckbox.$submitted&&multipleCheckbox.fruits_{{$index}}.$error.required">You must choose {{fruits[$index].name}} fruit</p> </div> <input type="submit" value="Submit"> </form> <pre>Fruits model: {{formData.selectedFruits | json}}</pre> </div> </body> </html>

使用AngularJs提交后如何验证复选框是否被选中？

问题描述

3 个解决方案

解决方案1
0 2017-08-03 16:35:59

解决方案2
0 2017-08-03 17:15:55

解决方案3
0 2017-08-03 17:24:08

使用AngularJs提交后如何验证复选框是否被选中？

问题描述

3 个解决方案

解决方案1 0 2017-08-03 16:35:59

解决方案2 0 2017-08-03 17:15:55

解决方案3 0 2017-08-03 17:24:08

解决方案1
0 2017-08-03 16:35:59

解决方案2
0 2017-08-03 17:15:55

解决方案3
0 2017-08-03 17:24:08