验证复选框与AngularJs

Question

我再次遇到复选框的问题。我从API获取信息并显示复选框。问题出现在我试图添加验证时。这是我的代码的一部分：

(function() { 
    'use strict'; 
    var fact = { 
     templateUrl: './app/components/fact.components.html', 
     controller: factCtrl 
    }; 
    angular.module('fApp').component('odcFacturas', fact); 
    factCtrl.$inject = ["$scope", "couponApi"]; 

    function factCtrl($scope, couponApi) { 
      var vm = this; 
      vm.clientOrder = null; 
      vm.all = false; 
      vm.sendData = function() { 
       vm.apiData = couponApi.get({ 
        idOrder: vm.idOrder 
       }).$promise.then(function(data) { 
        for (var i = 0; i < data.Response.length; i++) { 
         data.Response[i].Select = vm.all; 
        } 
        vm.coupons = data.Response; 
        vm.combo = data.Response.length > 0; 
       }); 
      } 

这里我所说的信息，和我的代码的下一部分检查所有的复选框：

vm.selectAll = function() { 
for (var i = 0; i < vm.coupons.length; i++) { 
    vm.coupons[i].Select = vm.all; 
} 
if (vm.all == 0) { 
    alert("Select at least one coupon"); 
} 
} 

我怎样才能触发3个验证了提交按钮？我的意思是：我想要做的就是验证三种情况：

1. 如果勾选“选择所有复选框”被选中，提交
2. 如果没有选中的复选框，显示警告消息
3. 如果在有至少一个复选框（或 'n' 个复选框）选择， 提交

在HTML视图我有此：

<div class ="container-fluid"> 
<div class="row"> 
    <div class="col-md-6"> 
     <div class="cbx input-group"> 
      <div class="checkbox" name="imtesting" ng-show="$ctrl.coupons.length > 0"> 
        <label><input type="checkbox" 
          ng-show="$ctrl.coupons.length > 0" 
          name="allCoupons" 
          ng-model="$ctrl.all" 
          ng-click="$ctrl.selectAll()"/>Select all coupons</label> 



        <ul> 
         <li ng-repeat="c in $ctrl.coupons"> 
         <input type="checkbox" 
           name="couponBox" 
           ng-model="c.Select" 
           ng-click="$ctrl.result()" 
           required/>{{c.CodeCoupon}} 
          <br> 
         </li> 
        </ul> 
       <label class="label label-danger" ng-show="submitted == true && !ctrl.newTest()">Select at least one coupon</label> 
      </div> 
     </div> 
    </div> 
</div> 

希望你能帮助我。

Thanx提前。

Answer 1

可以使用Select财产每张赠券的物体，像

vm.canSubmit = function() { 
    for(var i = 0; i< vm.coupons.length; i++) 
    { 
     if (vm.coupons[i].Select) { 
      return true; 
     } 
    } 
    return false; 
} 

Answer 2

重做你正在处理您的selectsAll功能的方式。当你使用角度时，有一种叫scope.$apply的东西，它实际上是运行的，它告诉dom在对象或属性发生变化时进行更新。有时候，如果你按照你使用它们的方式使用循环，它不会注册一个变化。

试试这个，它应该工作：

vm.selectAll = function() 
    { 
     vm.all = !vm.all; 
     vm.coupons.forEach(function(o){ 
      o.Select = vm.all; 
     }) 

    } 

vm.submit = function(){ 
    var checked = 0; 
    vm.coupons.forEach(function(o){ 
     if(o.Select === true) 
      checked +=1; 
    }) 
    if(vm.all || checked > 0){ 
     //submit here 
    } 
    else if(checked === 0){ 
     //error 
    } 
} 

这将是双向的。如果选中，它将检查所有，如果未选中，它将取消全部选中。该验证将适用于所有三种情况。