Question

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

<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请求。我是棱角分明的新手，我对复选框的工作方式感到有些困惑。

问题1：我理解ng-model如何与普通文本字段一起使用。但我不确定我是如何使用复选框的。 ng-model会替换html名称元素吗？这意味着，当我使用$resource将其提交给服务器时，ng-model是否为数据集的键？

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

Answer 1

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

以下是您的<ion-checkbox>代码：

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

对于每个点击的复选框，这会在subcategory: true/false对象中设置formData。

然后您需要做的就是将formData对象发送到任何地方，就像以前一样。这是一个代码集，显示更改的复选框，更新的formData对象和字符串化的formData对象。

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

我为event_sub_categories创建了自己的值作为示例，当然这些与您自己的

不同

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

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

1 个答案: