Question

我想创建一个列表，其中每个选项都是一个列表本身，但是当我尝试this时，select标记会过早地结束它。这可以在AngularJS 1.3中完成吗？

<body ng-app="">
  <select placeHolder="This">
    <option>A place-holder!</option>
    <option>
      <select>
        <option>A place-holder!</option>
      </select>
    </option>
    <option>Greetings!</option>
  </select>
</body>

像这样，使用optgroup创建一个选项子组而不是新列表。

Answer 1

使用<optgroup>代替内部选择。

<body ng-app="">
  <select placeHolder="This">
    <option>A place-holder!</option>
    <optgroup label="Inner list">
        <option>A place-holder!</option>
        <option>A place-holder!</option>
    </optgroup>
    <option>Greetings!</option>
  </select>
</body>

Answer 2

它不是标准的HTML组件。您需要一个实现它的JS库。我能找到的是selectivity.js，但你必须写一个指令将它与你的角度应用程序集成。

$('#select-with-sublist').selectivity({
    allowClear: true,
    items: [{
        id: 'a',
        text: 'A',
        submenu: {
            items: [
                { id: 'a1', text: 'A1' },
                { id: 'a2', text: 'A2' },
                { id: 'a3', text: 'A3' }
            ]
        }
    }, {
        id: 'b',
        text: 'B',
        submenu: {
            items: [
                { id: 'b1', text: 'B1' },
                { id: 'b2', text: 'B2' }
            ]
        }
    }],
    placeholder: 'Select',
    showSearchInputInDropdown: false
});

工作示例：https://jsfiddle.net/LukaszWiktor/ge64o2ym/

Answer 3

这可以使用this示例完成，它是Bootstrap 3中的多级下拉菜单。由于它更灵活，因此更好地使用它。不仅限于两个级别。

如何创建一个列表，使每个选项都是AngularJS中的列表？

3 个答案: