Html ANGULARJS：我在ng checked指令中的函数无限运行

尝试做一些我认为很简单的事情，但结果却很烦人。我只是想让一个函数在使用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>

（此检查仅适用于我第一次加载页面时。）

---

当我加载页面时，这个ng checked函数无限运行。关于ng checked指令有什么我不知道的，或者一些小细节或者忘记了？提前谢谢

您误解了

ng checked

的意图。您认为它所做的是“选中复选框时执行此表达式”-一个事件处理程序指令

它实际做的是根据表达式设置

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>

（也可以只填充所需的位）

最后，去掉整个

$scope.optionalPaymentCheckbox

函数。不过，您仍然需要代码来设置默认值

---

最后一件事：该属性被称为

optionalPayment

，这令人困惑，因为它实际上更像

paymentType

，但这与当前的问题无关。

是的。它调用它，它改变了optionalPayment的价值，然后它再次调用它，看看这个模型现在是否稳定，然后把它变回以前的价值，等等。我不明白你想要实现什么。你甚至没有从方法中返回任何东西。你想做什么？我只是想做一个复选框，未选中时为TournamentConst.PAYMENT.OPTIONAL，选中时为TournamentConst.PAYMENT.MANDATORY。这就是ng true value和ng false value的用途。没有检查。由于该函数改变了checkobx本身的ng模型，因此ng change也不是正确的解决方案。他/她所需要的只是ng真值和ng假值（当然还有ng模型）。但是你的解释是正确的。很高兴知道！谢谢你们两位的解释。事实上，我现在正在尝试改变，但它也不起作用。我在页面加载中将模型设置为一个特定的值，但是当我单击复选框时，它告诉我该值只是true，而不是实际值。我将尝试ng true value和ng false value。@JBNizet您应该将此作为答案发布，它确实是正确的解决方案<代码>不需要更改。请随时根据我的建议修改您的答案。它已经有了很好的解释。

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

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