ANGULARJS：ng-checked指令を無限に実行している関数

Question

私が思ったことをやろうとするとかなり簡単ですが、かなり迷惑になります。私は、ng-checkedディレクティブを使ってチェックボックスをクリックしたときに実行される関数を持つことを試みています。

これはHTMLです：

<div class="form-group"> 
     <label class="col-sm-2 control-label">Make Payment Optional</label> 
     <div class="col-sm-4 center-checkbox"> 
      <input type="checkbox" 
        class="center-checkbox" 
        ng-model="formData.optionalPayment" 
        ng-checked="optionalPaymentCheckbox();" 
        validate-servererror="featured"/> 
     </div> 
    </div> 

そして、これは角です：

if($scope.formData.optionalPayment === undefined) { 
    $scope.formData.optionalPayment = TournamentConst.PAYMENT.OPTIONAL; 
} 

（このチェックはちょうど私が最初にページをロードするときのためです。）

$scope.optionalPaymentCheckbox = function() { 
    if($scope.formData.optionalPayment === TournamentConst.PAYMENT.OPTIONAL) { 
    $scope.formData.optionalPayment = TournamentConst.PAYMENT.MANDATORY; 
    } else { 
    $scope.formData.optionalPayment = TournamentConst.PAYMENT.OPTIONAL; 
    } 
}; 

このページを読み込むと、このng-checked関数は無限に実行されます。私が知らないng-checkedディレクティブや、細かいディテールや忘れてしまったものについて何かありますか？前もって感謝します。

Answer 1

あなたはng-checkedの意図を誤解しています。あなたがしていると思うのは、 "チェックボックスがオンになっているときにこの式を実行する"というイベント・ハンドラ・ディレクティブです。

実際には、式に基づいてcheckedプロパティが設定されます。つまり、式に時計を設定し、すべてのダイジェストを評価します。値が変更されると、それに応じてcheckedプロパティが設定または解除されます。これは予期しない動作につながることができ、このディレクティブは、ngModelと一緒に使用してはならないことを

注：

は実際には、documentation for ng-checkedはこれを言います。

@JB Nizetが正しく指摘したように、あなたはng-true-valueとng-false-valueを使用し、完全ng-checkedを除去することによって、あなたの特定のケースでは所望の効果を達成することができます。

だからあなたのHTMLは次のようになります。その後、あなたのコントローラでは、スコープであなたのTournamentConstオブジェクトを移入

<div class="form-group"> 
    <label class="col-sm-2 control-label">Make Payment Optional</label> 
    <div class="col-sm-4 center-checkbox"> 
     <input type="checkbox" 
       class="center-checkbox" 
       ng-model="formData.optionalPayment" 
       ng-true-value="TournamentConst.PAYMENT.MANDATORY" 
       ng-false-value="TournamentConst.PAYMENT.OPTIONAL" 
       validate-servererror="featured"/> 
    </div> 
</div> 

、そのテンプレートは、それを見ることができます。

$scope.TournamentConst = TournamentConst; 

（またはあなただけ読み込むことができますあなたが必要なビット）

最後に、$scope.optionalPaymentCheckbox関数全体を取り除く。ただし、デフォルト値を設定するコードはまだ必要です。

1つ最後のこと：のようなものですが、プロパティがoptionalPaymentと混乱していますが、それは現在の問題とは関係ありません。