如何根据是否选中复选框绑定数据？

Question

刚开始使用 Angular，我正在使用复选框来确定在获取请求期间发送哪些参数（这是我的尝试）：

<input type="checkbox" ng-click="submit('color[]', 'red')"/>
<input type="checkbox" ng-click="submit('color[]', 'green')" checked/>
<input type="checkbox" ng-click="submit('color[]', 'blue')"/>

我有一个变量$scope.params 存储我的http get 请求的参数。我的提交功能很简单：

$scope.submit = function (attribute, value) {
  $scope.params[attribute] = value;
};

它只是将color[] 添加到 params 对象。与收音机不同，复选框值可以存储为数组并按如下方式提交：api?color[]=red&color[]=green 因为我的后端是 PHP，这是首选格式。但是，我的提交功能每次都会简单地覆盖它。我不确定如何使用相同的“密钥”存储多个参数。

我的另一个问题是 ng-click 不适合此任务，因为它不采用复选框的当前状态。请注意，我的绿色复选框最初加载为选中状态。有没有办法将此绑定到我的 $scope.params 对象？

理想情况下，我想实现类似的东西：

$scope.params = {
  "color[]" = ['red', 'green', 'blue']
};

根据下面分号的回答，我可以使用：

<input type="checkbox" ng-model="params.colors[]" ng-true-value="'red'"/>
<input type="checkbox" ng-model="params.colors[]" ng-true-value="'blue'"/>
<input type="checkbox" ng-model="params.colors[]" ng-true-value="'green'"/>

但是用"[]" 命名任何东西都会破坏代码。

Answer 1

与所有输入元素一样，ng-model 支持复选框。这个核心指令是ng-bind 的表亲。它说“这个元素的状态代表这个模型”。它的行为由输入类型决定。在复选框的情况下，您要建模的值通常是布尔值，因为复选框基本上是“布尔”输入（选中/未选中 == true/false）。

<input type="checkbox" ng-model="colors.red"/>

在控制器函数中：

$scope.colors = {
    red: false,
    green: true,
    blue: false
};

实际上，您也可以使用ng-true-value 和ng-false-value 将选中/未选中映射到非布尔值。您可以在 Angular 文档中使用复选框阅读更多关于 ng-model 的这些选项和其他选项的信息：​​

https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D

ng-bind和ng-model的核心区别在于前者是单向的（只是一个视图），而后者是双向的（元素可以用来改变模型）。

关于 Angular 中 MVC 前提的更一般的答案：

在您问题的示例中，您使用类似 jQuery 的解决方案来尝试实现视图和控制器之间的绑定。这确实不太理想。仅当您对“单击时”发生某些事情特别感兴趣时，才将函数绑定到单击事件。

如果用户使用 tab 键和空格键来选中复选框怎么办？模型不会更新。

或者假设您想在其他地方更改模型中的值——也许您有一个“重置”按钮，可以将它们恢复为原始值。视图不会更新。

如果视图和模型之间的连接都是通过“动作”进行的，那么它们很容易不同步。您必须确保您处理了用户与元素交互的所有可能方式，并且每次以编程方式更改数据时，您都需要将更改显式推送到视图。但是使用ng-model 和ng-bind 可以让它们保持同步，无论模型在哪里更改或用户如何交互。这确实是 Angular 的重点。