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，这是首选格式。但是我的提交功能每次都会覆盖它。我不确定如何使用相同的＆＃34;键＆＃34;来存储多个参数。

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

理想情况下，我希望实现以下内容：

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

根据Semicolon的答案，我可以使用：

<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的堂兄。它说＆＃34;这个元素的状态代表了这个模型＆＃34;。其行为由输入类型决定。在复选框的情况下，您建模的值通常是布尔值，因为复选框基本上是＆＃34;布尔值＆＃34;输入（选中/未选中== 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的解决方案来尝试实现视图和控制器之间的绑定。这真的不太理想。只有当您特别想要发生某些事情时才绑定一个函数来点击事件＆＃34;点击＆＃34;。

如果用户使用Tab键和空格键来检查框，该怎么办？该模型不会更新。

或者让我们说你想在其他地方更改模型中的值 - 也许你有一个＆＃34;重置＆＃34;按钮，将它们返回到原始值。视图不会更新。

如果视图和模型之间的连接都是通过＆＃34;动作＆＃34;它们很容易不同步。您必须确保处理用户可以与元素交互的每种可能方式，并且每次以编程方式更改数据时，您都需要明确地将更改推送到视图。但是，无论模型在何处更改或用户如何交互，使用ng-model和ng-bind都可以让它们保持同步。真的，这是Angular的要点。

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

1 个答案: