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>

这是Angular：

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属性。

事实上，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令人困惑，但这与当前问题无关。

ANGULARJS：ng-checked指令中的函数无限运行

1 个答案: