使用多个ng重复构建表格如何处理数据?角js

礼萨

我正在建造手推车。每个产品都有“附加组件”,例如

  • 尺寸:大
  • 调料:无色拉调料
  • 饮料:可乐

这些“附件”来自数据库。并从API作为对象返回。

object看起来像这样:object cat_addons(addon_group)-object(addon)-object -etc object item addons(addon_group)-object(addon)-object-etc

现在,我正在制作“表单”,其中显示了选择框和内容以及一个“添加”按钮。现在,当用户单击“确定” /“添加”时,我想要所有选定的值,以便我可以对其进行进一步处理...但是现在,我对此一无所知,因为ng-model必须是可变的,因为它是重复创建的。

所以我正在寻找一个选项以获取所有选择的值以形成(多个)ng重复填充的形式,我该怎么做呢?

看法:

<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)或select标记(https://docs.angularjs.org/api/ng/directive/select)。

如果这些不是您想要的内容,请尝试阅读文档以探索角度。我相信你会喜欢的。如果您仍然遇到困难,请对此答案发表评论,我们会为您提供帮助。我确实知道如何使用ng-repeat来实现您想要的东西,但是它甚至还不接近完成您想要做的事情的最佳方法。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何处理多个构建目标,例如dev,test,main?

来自分类Dev

微服务架构中如何处理重复数据

来自分类Dev

Node.JS如何处理重复的传递依赖项?

来自分类Dev

如何处理重复的哈希

来自分类Dev

如何处理重复块

来自分类Dev

使用多种数据类型时,如何处理多个foreach循环

来自分类Dev

使用XSL合并后如何处理来自多个XML文件的所有数据

来自分类Dev

使用if ... else语句时如何处理重复的代码?

来自分类Dev

如何处理需要从多个活动访问的数据?

来自分类Dev

如何处理包含多个数据的 JSON

来自分类Dev

Sails.js Waterline更新:如何处理多个更新

来自分类Dev

Alexa Node JS 如何处理多个事件的取消事件

来自分类Dev

如何处理多个联接

来自分类Dev

如何处理多个密码

来自分类Dev

使用角重复的多个小叶

来自分类Dev

如何处理来自node.js的网页上的数据

来自分类Dev

Vue Js。如何处理v-for数据作为数字?

来自分类Dev

如何处理来自node.js的网页上的数据

来自分类Dev

如何处理CSV数据?

来自分类Dev

如何处理JSON数据?

来自分类Dev

如何处理CSV数据?

来自分类Dev

如何处理 fixedLengthformat 数据?

来自分类Dev

构建 wxWidgets 后如何处理它

来自分类Dev

如何处理重复的持久Stomp订户?

来自分类Dev

如何处理重复的Xpath Appium Robotframework?

来自分类Dev

如何处理重复的持久Stomp订户?

来自分类Dev

使用红宝石中的多个重复项处理大量数据

来自分类Dev

如何处理SQL Server数据库中的重复记录

来自分类Dev

SBT-Assembly(Scala-Neo4j),如何处理重复数据删除问题?