AngularJsでチェックボックスを有効にします

Question

もう一度チェックボックスに問題があります。私はAPIから情報を得て、チェックボックスのように表示しています。問題は、私が検証を追加するためにtriyingしているときに来る。これは私のコードの一部です：

ここで私は情報を呼び出し、自分のコードの次の部分は、すべてのチェックボックスをチェックし

(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"); 
} 
} 

私はsubmitボタンで3つの検証をトリガすることができますどのように？私が意味する：チェックボックスがチェックされている「すべてのチェックボックスを選択する」場合、

1. [いいえ]を選択し、チェックボックスがありません場合
2. を提出、であるかどうアラートメッセージ
3. を示しています。私がやりたいことは3例を検証しています は、HTMLビューで

を提出する少なくとも1つのチェックボックス（または 'n' のチェックボックス）を選択し、私はこれを持っている：

<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

あなたは、あなたのselectsAll機能を処理する方法をやり直し

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

Answer 2

のように各クーポンオブジェクトからSelectプロパティを使用することができます。あなたが角度を使用しているときには、オブジェクトまたはプロパティが変更された場合に更新するようにdomに指示する実際に実行されているscope.$applyというものがあります。ときどきあなたがそれらを使用している方法でループを使用すると、変更を登録しません。

はこれを試してみて、それが動作するはずです：

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

これは、両方の方法を動作します。チェックされている場合はすべてチェックし、チェックを外すとすべてチェックを外します。この検証は、3つのシナリオすべてで有効です。