如何使用ng-model提交复选框的值？

Question

我现在有一个表单里面有两个复选框，用户可以选择一个或者两个并将数据发送到服务器，但是我不确定如何在用户提交数据时将这两个值都绑定到 $scope.ng-model ？

main.html

<div class="col-md-8 col-md-offset-2">
    <label class="checkbox">
        <input type="checkbox" ng-value="'uploadPrc'" ng-model="prcModel">Upload PRC
    </label>
    <label class="checkbox">
        <input type="checkbox" ng-value="'uploadPrt'" ng-model="prtModel">Upload PRT
    </label>
</div>

- aftab

Answer 1

Angular的“双向数据绑定”工作原理如下： 在控制器范围内初始化表单数据。

$scope.form = {
  prcModel: false,
  prtModel: false
}

你的看法是什么：

<div class="col-md-8 col-md-offset-2">
    <label class="checkbox">
        <input type="checkbox" ng-value="'form.prcModel'" ng-model="form.prcModel">Upload PRC
    </label>
    <label class="checkbox">
        <input type="checkbox" ng-value="'form.prtModel'" ng-model="form.prtModel">Upload PRT
    </label>
</div>

如果您更改复选框的值，您的模型的值也会立即更改。所以您只需要在控制器中处理$scope.form即可。

- Andre Kreienbring

---

如果我发布form.prcModel的数据，那么在上面的示例中将发送什么值到服务器？ - aftab

如果您的 PRC 复选框被选中，则 $scope.form.prcModel 将为 true，并且该值将被提交。 - Andre Kreienbring

在这种情况下，我应该为两个复选框保持相同的ng-model。 - aftab

还有一件事让我困惑，ng-value和ng-model必须保持一致吗？ - aftab

谢谢，我已经解决了，现在它运行得很好。感谢Stack提供的帮助！ - aftab

Answer 2

不知道这是否是您正在寻找的内容，但为什么不尝试拥有自己的模型，例如：

<div class="col-md-8 col-md-offset-2">
    <label class="checkbox">
        <input type="checkbox" ng-model="myModel.prcModel">Upload PRC
    </label>
    <label class="checkbox">
        <input type="checkbox" ng-model="myModel.prtModel">Upload PRT
    </label>
</div>

因此，在 .js 代码中，您可以将模型“myModel”作为对象发送和接收，其值将为 true 或 false。

...
var data = $scope.myModel
...
$scope.myModel = data;

- Jose Rocha