驗證複選框與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 
    } 
} 

這將是雙向的。如果選中，它將檢查所有，如果未選中，它將取消全部選中。該驗證將適用於所有三種情況。