javascript - 将多个 CSS 类应用于 Angular 选择？

Question

我在组件模板中有一个正常的选择，如下所示:

<select id='target-region' multiple="" class="ui dropdown">
    <option selected value="01">Europe</option>
    <option value="02">North America</option>
    <option value="03">South America</option>
    <option value="04">Asia</option>
    <option value="05">Africa</option>
</select>

这个下拉菜单看起来像这样:

我试着把它变成一个像这样的 Angular 选择:

<select id="target-region" class="ui dropdown" ng-model="$ctrl.targetRegion" ng-options="item.name for item in $ctrl.TARGET_REGIONS track by item.value" multiple=""></select>

我在组件的 JS 中放置了以下内容:

this.TARGET_REGIONS = [
    { value: '01', name: 'Europe' },
    { value: '02', name: 'North America' },
    { value: '03', name: 'South America' },
    { value: '04', name: 'Asia' },
    { value: '05', name: 'Africa' },
];
this.targetRegion = [this.TARGET_REGIONS[0]];

没有错误，但下拉选择现在以一种奇怪的方式显示:

我的样式似乎没有生效，点击不同的选项也没有选中它们，所以它甚至不起作用。

我检查了选择并看到了这个:

这表明 ui dropdown 类正在应用于由 Angular 创建的外部包装器 div 而不是应用于 select。

至少，我想知道:如何使 ui dropdown 类直接应用于选择？

Answer 1

如果您直接尝试转换为 Angular ，则需要更改一些 javascript/css 以使 ng-options 起作用。如果你不想改变任何东西，我建议你试试这个

<select id='target-region' multiple="" class="ui dropdown">
<option ng-repeat="item in $ctrl.TARGET_REGIONS" value="item.value" >{{item.name}}</option>
</select>