Question

我是Angular的新手，我正在尝试使用AngularJS制作基本原型来销售公司。我已经掌握了所有基础知识，但是为了满足市场营销需要在某些下拉列表中显示选项的方式，我遇到了麻烦。他们想要像这样的视觉（没有子弹），其中粗体项是optgroup元素：

青铜
白色
米色
的 TwoTone
- 的 WhtExt
  - W Ext / Brz Int
  - W Ext / Drk Oak Int
- 的 BrzExt
  - Brz Ext / Wht Int
  - Brz Ext / Drk Oak Int

HTML看起来像这样：

        <fieldset id="fs_frameColor">
            <label class="col-xs-4" for="frameColor">Frame Color *</label>                
            <select class="col-xs-8" id="frameColor"
                    ng-model="vm.frameColor"
                    ng-change="vm.frameColorUpdated()"
                    ng-options="color.label for color in vm.frameColors">
            </select>
        </fieldset>

我希望我可以让frameColors数组中包含包含label和value属性的对象，但是还有类似于type和level属性的东西，这样如果类型是选项，我可以输出一个常规的<option>元素。如果类型是选项组，我可以输出常规<optgroup>。

我知道到目前为止这一切都很简单。例如，您可以在ng-options指令中引入一个group，该指令将根据group by自动创建optgroup元素。但是，由于市场营销希望这些方式出现，嵌套是多层次的。

由于多级性质，这就是为什么我希望能够在我的数组中的对象上使用类型和级别属性，以便例如上面的“ TwoTone ”项目将有类型：“OptionGroup”所以我可以输出一个<optgroup/>元素，然后级别：1所以它将正常缩进。然后它的子“ WhtExt ”项将具有类型：“OptionGroup”，但是级别：2因此我可以输出具有其正常粗体文本的<optgroup/>元素，但该文本缩进为情侣空间。该组的子选项元素将具有类似类型：“选项”和级别：3因此将输出<option/>元素，文本缩进足以使它们显示为“ WhtExt ”的子项家长optgroup。此处未显示，但如果他们希望子选项元素在“ WhtExt ”子选项组之前显示在“两个”选项组下，则数据数组中的该对象将具有以下类型： “选项”和级别：2。

我使用指令成功完成了这项工作，但前提是我将<select><option/><option/><optgroup><optgroup><option/><option/></optgroup><optgroup><option/><option/></optgroup></optgroup></select>代码直接嵌入到我的html中，并将所需的指令添加到特定的子元素中。但是，长期这些数据将来自某些API，因此我尝试使用与数组数据中的属性值绑定的ng-options来确定实现所有此自定义多层组的方法。

由于这是一个原型，输入数据是流动的，我试图想出一个结构，它将传递角度指令（或其他一些角度机制）的足够信息，以输出上面显示的结果。以下是我绑定的硬编码数据的示例。

            vm.frameColors = [
            {
                value: "BZ",
                label: "Bronze",
                type: "Option",
                level: "0"
            },
            {
                value: "W",
                label: "White",
                type: "Option",
                level: "0"
            },
            {
                value: "B",
                label: "Beige",
                type: "Option",
                level: "0"
            },
            {
                value: "TwoTone",
                label: "TwoTone",
                type: "OptionGroup",
                level: "0"
            },
            {
                value: "WhtExt",
                label: "WhtExt",
                type: "OptionGroup",
                level: "1"
            },
            {
                value: "WB",
                label: "W Ext/Brz Int",
                type: "Option",
                level: "2"
            },
            {
                value: "WDO",
                label: "W Ext/Drk Oak Int",
                type: "Option",
                level: "2"
            },
            {
                value: "BrzExt",
                label: "BrzExt",
                type: "OptionGroup",
                level: "1"
            },
            {
                value: "BW",
                label: "Brz Ext/Wht Int",
                type: "Option",
                level: "2"
            },
            {
                value: "BDO",
                label: "Brz Ext/Drk Oak Int",
                type: "Option",
                level: "2"
            },
        ];

非常感谢任何帮助。

-Mike

Answer 1

对于我的项目，我有一个类似的任务（甚至更多我必须有多选项），我创建了一个指令，我的下拉列实际上是一个带有几个元素级别的div，类似于这个伪结构：

<ul>
   <li> option1</li>
   <li> option2</li>
   <li class="group"> optiongroup1
       <ul>
        <li> suboptionoption1</li>
        <li> suboptionoption2</li>
        <li> suboptionoption3</li>
      </ul>
   </li>
</ul>

然后自定义列表和组。但是，您需要将数据结构更改为具有子选项的可迭代json。

Answer 2

@DianaR我终于得到了我想要的东西，将逻辑分解为视图html和角度指令。以下是我现在处理gridStyle对象数组的视图html，而不是前面的frameColor数组，但都是相同的：

free()

这是指令的样子：

        <fieldset id="fs_gridStyle">
            <label class="col-xs-4" for="gridStyle">Grid Style *</label>
            <select class="col-xs-8" id="gridStyle"
                    ng-model="vm.gridStyle"
                    ng-change="vm.gridStyleUpdated()"
                    full-select datarepo="vm.gridStyles">
            </select>
        </fieldset>

现在我只需要确保它正常运行，但到目前为止看起来还不错。它给了我想要的最终结果，其中我的传入对象数组包含值，标签和misc信息，例如level属性，以指示该项目应在下拉列表中缩进的位置等。我现在可以有任意数量的选项和optgroup子项嵌入在下拉列表中根据需要缩进。您不能嵌套多个optgroup元素，但我可以使用level属性直观地处理它，这会为文本添加空格。

如何使用ng-options构建自定义选项和多级别optgroup？

2 个答案: