使用多个 ng 重复构建表单如何处理数据? angular js
build a form using multiple ng repeats how to proccess the data? angular js
我在造一辆购物车。每个产品都有 "addons" 个,例如
- 尺码:大
- 调料:无沙拉酱
- 饮料:可乐
这些"addons"来自数据库。并作为对象从 API 返回。
对象看起来像这样:
对象 cat_addons (addon_group)
-对象(插件)
-目的
- ETC
对象项目插件 (addon_group)
-对象(插件)
-目的
- 等等
现在我正在制作 "form" 至极显示 select 框和内容以及一个 "add" 按钮。现在,当用户单击 OK/add 我想要所有 selected 值,以便我可以进一步处理它......但现在我对此一无所知,因为 ng-model 必须是可变的,因为它是重复创建的。
所以我正在寻找一个选项来获取所有 selected 值形成一个(多)ng-repeat 填充形式我该怎么做?
查看:
<form ng-submit="addItemToCart()">
<!-- ADDONS -->
<!-- CAT ADDONS -->
<div ng-if="cat_addons">
<div ng-repeat="(k, addon_group) in cat_addons">
{{addon_group.addon_group_name}}
<!-- SINGLE OPTION-->
<div ng-if="addon_group.addon_option_type == 'single'">
<span>
<select ng-options="addon.addon_name as addon.addon_id for addon in addon_group.items">
<!-- SHOWS NOTHING? -->
</select>
</span>
</div>
<!-- SINGLE OPTION -->
<!-- MULTI OPTION-->
<div ng-if="addon_group.addon_option_type == 'multi'">
<span ng-repeat="(k, addons) in addon_group.items">
<input type="checkbox" name="{{addons.addon_id}}">{{addons.addon_name}}
</span>
</div>
<!-- MULTI OPTION -->
</div>
</div>
<!-- CAT ADDONS -->
<!-- ADDONS -->
<button type="submit">ok</button>
</form>
控制器:
$scope.addItemToCart = function() {
//i have no clue...
}
我理解在您发现它的功能后使用 ng-repeat 的冲动。但是 angular 还有很多东西可以让像这个问题这样的事情变得简单得多。您可能想探索 ngOptions 指令 (https://docs.angularjs.org/api/ng/directive/ngOptions) or the select tag (https://docs.angularjs.org/api/ng/directive/select).
如果这些不是您要查找的内容,请尝试阅读文档以探索 angular。我相信你会喜欢的。如果您仍然遇到困难,请对此答案发表评论,我会帮助您。我知道如何使用 ng-repeat 实现你想要的,但它甚至不是你想要做的最好的方式。
我在造一辆购物车。每个产品都有 "addons" 个,例如
- 尺码:大
- 调料:无沙拉酱
- 饮料:可乐
这些"addons"来自数据库。并作为对象从 API 返回。
对象看起来像这样: 对象 cat_addons (addon_group) -对象(插件) -目的 - ETC 对象项目插件 (addon_group) -对象(插件) -目的 - 等等
现在我正在制作 "form" 至极显示 select 框和内容以及一个 "add" 按钮。现在,当用户单击 OK/add 我想要所有 selected 值,以便我可以进一步处理它......但现在我对此一无所知,因为 ng-model 必须是可变的,因为它是重复创建的。
所以我正在寻找一个选项来获取所有 selected 值形成一个(多)ng-repeat 填充形式我该怎么做?
查看:
<form ng-submit="addItemToCart()">
<!-- ADDONS -->
<!-- CAT ADDONS -->
<div ng-if="cat_addons">
<div ng-repeat="(k, addon_group) in cat_addons">
{{addon_group.addon_group_name}}
<!-- SINGLE OPTION-->
<div ng-if="addon_group.addon_option_type == 'single'">
<span>
<select ng-options="addon.addon_name as addon.addon_id for addon in addon_group.items">
<!-- SHOWS NOTHING? -->
</select>
</span>
</div>
<!-- SINGLE OPTION -->
<!-- MULTI OPTION-->
<div ng-if="addon_group.addon_option_type == 'multi'">
<span ng-repeat="(k, addons) in addon_group.items">
<input type="checkbox" name="{{addons.addon_id}}">{{addons.addon_name}}
</span>
</div>
<!-- MULTI OPTION -->
</div>
</div>
<!-- CAT ADDONS -->
<!-- ADDONS -->
<button type="submit">ok</button>
</form>
控制器:
$scope.addItemToCart = function() {
//i have no clue...
}
我理解在您发现它的功能后使用 ng-repeat 的冲动。但是 angular 还有很多东西可以让像这个问题这样的事情变得简单得多。您可能想探索 ngOptions 指令 (https://docs.angularjs.org/api/ng/directive/ngOptions) or the select tag (https://docs.angularjs.org/api/ng/directive/select).
如果这些不是您要查找的内容,请尝试阅读文档以探索 angular。我相信你会喜欢的。如果您仍然遇到困难,请对此答案发表评论,我会帮助您。我知道如何使用 ng-repeat 实现你想要的,但它甚至不是你想要做的最好的方式。