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

Question

I had a normal select in a component's template like this:

<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>

This dropdown looks something like this:

I tried to turn it into an angular select like so:

<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>

And I placed the following in the JS for the component:

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]];

There are no errors, but the dropdown select is now displaying in an odd way:

My styling seems to not take effect and clicking on the different options does not select them, so it's not even functional.

I inspected the select and saw this:

This indicates that the ui dropdown classes are being applied to an outer wrapper div created by angular rather than being applied to the select .

At the very least, I'm wondering: how do I make the ui dropdown classes apply directly to the select?

Answer 1

if you're directly trying to convert into angular, you need to change some of the javascript/css in order for ng-options to work. if you dont want to change anything, i sugggest you try this

<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

Hi i got it to work this way. heres a working fiddle. http://plnkr.co/edit/pNiKKDHQEZ6KoZhEuDlO?p=preview

I suppose you might have forgotten to initialise your dropdown.

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