带有 ng-repeat 的角度复选框形式只能选择一个选项

Question

我正在尝试创建一个多步表单，第 2 步是一堆复选框。这是带有复选框的表单：

<form ng-submit="createSubCategory(formData)">
    <div ng-repeat="sub_category in event_sub_categories">
        <ion-checkbox ng-model="formData.sub_category" ng-true-value="'{{sub_category}}'">
          {{sub_category}}</ion-checkbox>
    </div>
    <button type="submit" class="button button-block button-positive">Continue</button>
</form>

复选框 (event_sub_categories) 的数据是从服务器中提取的。我需要将用户选择的输入保存到 formData。 formData 正在多步骤表单的每个页面上收集，并将在所有表单页面之后与 post 请求一起提交。我是 Angular 的新手，我对复选框的工作方式有些困惑。

问题 1：我了解 ng-model 如何与普通文本字段一起工作。但我不确定我是否了解它如何与复选框一起使用。 ng-model 是否替换了 html 名称元素？意思是，当我使用$resource提交给服务器时，数据的key是ng-model设置的吗？

问题 2：我如何命名 ng-model 以便它是 formData 的一部分，但它也与从数据库中提取的 sub_category 的名称相关。问题是使用上面的代码，在任何给定时间只能选择一个复选框，我希望用户能够在给定时间检查许多复选框。如果无法做到这一点，如何通过复选框获得所需的功能？

Answer 1

为了能够一次选择多个复选框，您需要一个对象（角度）来保存所有值。我已经在自己的应用程序中实现了这段代码，并且发现接收它的函数很容易解释对象。 （迭代对象检查真/假值）

这是您的<ion-checkbox> 代码：

<ion-checkbox ng-repeat="sub_category in event_sub_categories" ng-model="formData[sub_category]">

这将为每个被点击的复选框在formData 对象中设置subcategory: true/false。

那么你需要做的就是将formData 对象发送到任何地方，就像你以前做的那样。这是一个代码笔，它显示复选框的变化、更新的formData 对象和字符串化的formData 对象。

http://codepen.io/anon/pen/LNdaev?editors=1010

我已经为 event_sub_categories 创建了我自己的值作为示例，所以这些值当然与你自己的不同

如果您有任何问题，请发表评论。