AngularJS，用复选框更改模型值答案

【问题标题】：AngularJS, change model value with checkboxAngularJS，用复选框更改模型值
【发布时间】：2018-10-17 12:26:54
【问题描述】：

我有一个名为“bool”的绑定数据变量，其值为 100。当我单击一个复选框时，我希望该值增加 50。我做错了什么？

<div ng-app="app">
  <h3 ng-model="bool = 100">BOOL</h3>
    <input type="checkbox" ng-model="add = 50"/>
    <div>{{bool + add}}</div>
</div>

任何帮助将不胜感激，

谢谢你:)

【问题讨论】：

您没有此应用的控制器吗？您能向我们展示您的 Javascript 代码 - 您的控制器吗？
我确实有一个空控制器，我想知道这是否可能纯粹通过指令计算，不需要数据去任何地方
我建议你尝试使用控制器。

标签： javascript html angularjs angularjs-directive directive

【解决方案1】：

ng-model 不能是表达式。如果你需要指定一个默认值，你应该使用ng-init。

此外，复选框的值为真 (1) 或假 (0)。因此，虽然{{bool + add}} 最初会显示150，但一旦您选中或取消选中该复选框，它将显示100 或101，因为现在add 是0 或1，具体取决于选中状态。

angular.module('app', []);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <div ng-app="app">
      <h3 ng-model="bool" ng-init="bool = 100; additional = 0">BOOL</h3>
        <input type="checkbox" ng-model="add" ng-change="additional = add * 50"/>
        <div>{{bool + additional}}</div>
    </div>

【讨论】：

嗨@Lex，是的，我试过了。它所做的是将值初始化为 150，然后单击复选框将其设置为 101（值为 1 的真值）并在 100 和 101 之间切换开关。
我需要的是初始值为 100，然后单击复选框，该值切换为 150
我不确定您为什么要在 HTML 中执行此操作，但我已更新我的答案以显示一种可能的方法。不过，正如 ishmaelMakitla 所建议的，这种类型的逻辑确实属于控制器。