将多个CSS类应用于角度选择？

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>

此下拉列表如下所示：

我试图把它变成像这样的角度选择：

<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

如果您直接尝试转换为角度，则需要更改一些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>

Answer 2

嗨，我让它以这种方式工作。这是一个工作小提琴。 http://plnkr.co/edit/pNiKKDHQEZ6KoZhEuDlO?p=preview

我想你可能忘了初始化你的下拉列表了。

$(function () {
$('.tag .ui.dropdown').dropdown({allowAdditions: true});  
 });