如何在使用AngularJs提交后检查复选框？

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

我在这里寻找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>

希望你能帮助我。对我来说这是一个新的世界。

Thanx提前。

来源

2017-08-03 Chuck Villavicencio

那么，为什么不在你的控制器上创建一个验证功能。循环遍历所有优惠券对象并检查它们是否有值。 e.g

$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>

来源

2017-08-03 16:35:59

那是因为你使用的是相同的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>

来源

2017-08-03 17:15:55 lealceldeiro

你必须创建动态名称每个复选框输入做验证。

下面是一个示例，因为您尚未提供数据集。

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="[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="" 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>

来源

2017-08-03 17:24:08 Vivz

如何在使用AngularJs提交后检查复选框？

回答

相关问题