Question

我正在使用AngularJs＆amp;我的第一个应用程序的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

那么，为什么不在Controller上创建验证功能呢？遍历所有优惠券对象并检查它们是否具有值。 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>

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 个答案: