ANGULARJS：函數我在ng-checked指令中運行無限

試圖做一些我認爲很簡單的事情，但事實證明它很煩人。我只是試圖使用ng-checked指令單擊複選框時運行的函數。ANGULARJS：函數我在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檢查函數無限運行。是否有關於ng-checked指令我不知道，或者一些小細節或忘記了？提前致謝。

來源

2017-01-10 amacdonald

嗯，是的。它會調用它，它會改變optionalPayment的值，然後再次調用它以查看模型現在是否穩定，並將其更改回其上一個值等等。我無法理解您想要實現的目標。你甚至沒有從方法中返回任何東西。您想做什麼？ –

我只是試圖做一個複選框，它是沒有選中的TournamentConst.PAYMENT.OPTIONAL，以及選中它時的TournamentConst.PAYMENT.MANDATORY。 – amacdonald

這就是ng-true-value和ng-false-value的用途。不是ng檢查。 HTTPS：//docs.angularjs。org/api/ng/input/input％5Bcheckbox％5D –

您誤解了ng-checked的意圖。你認爲它做的是「當複選框被選中時執行這個表達式」 - 一個事件處理程序指令。

它實際上是根據表達式設置checked屬性。這意味着它建立了表達式的觀察並對每個摘要進行評估。如果該值發生更改，則會相應地設置或取消設置checked屬性。

事實上，documentation for ng-checked這樣說：

請注意，這個指令不應該連同ngModel使用，因爲這可能會導致意外的行爲。

由於@JB Nizet正確地指出的那樣，你可以通過使用ng-true-value和ng-false-value和完全移除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-true-value="TournamentConst.PAYMENT.MANDATORY" 
       ng-false-value="TournamentConst.PAYMENT.OPTIONAL" 
       validate-servererror="featured"/> 
    </div> 
</div>

然後，在你的控制器，填充的範圍你TournamentConst對象，所以模板可以看到它：

$scope.TournamentConst = TournamentConst;

（或者你可以填充你需要的位）

最後，擺脫整個$scope.optionalPaymentCheckbox函數。不過，您仍然需要代碼來設置默認值。

最後一件事：令人困惑的是該物業被稱爲optionalPayment，當時它更像paymentType，但與當前問題無關。

來源

2017-01-10 23:18:23 GregL

由於函數改變了checkbox本身的ng模型，ng-change也不是正確的解決方案。他/她需要的是ng-true-value和ng-false-value（當然還有ng-model）。但你的解釋是正確的。 –

很高興知道！謝謝你的解釋。我實際上正在嘗試改變，而且它也不起作用。我將模型設置爲頁面加載時的特定值，但是當我點擊複選框時，它告訴我值是真的，而不是實際值。我會嘗試ng-true-value和ng-false的值。 – amacdonald

@JBNizet你應該發佈這個答案，這確實是正確的解決方案。 'ng-change'不需要。 – GregL

ANGULARJS：函數我在ng-checked指令中運行無限

回答

相關問題