Applying multiple CSS classes to an angular select?

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?

can you give us a fiddle / css styles to show us what your problem is. — lhavCoder
– lhavCoder, Commented Mar 29, 2017 at 15:15
JS fiddle would be more useful. Please provide more information like, if you are using any plugin for select or any other javascript. Thanks — Sachin Kadam
– Sachin Kadam, Commented Mar 29, 2017 at 15:27
I'll try to pare it down so it is in a fiddle. I did realize that it's using a semantic UI dropdown: semantic-ui.com/modules/dropdown.html — carmenism
– carmenism, Commented Mar 29, 2017 at 15:41

lhavCoder · Accepted Answer · 2017-03-29 15:23:49Z

2

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>

answered Mar 29, 2017 at 15:23

lhavCoder

9615 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

carmenism Over a year ago

Is there a way to stop angular styling from being applied to the dropdown? Because this has the same exact effect as what I already tried.

lhavCoder Over a year ago

is your drop down custom made or have you used a plugin to achieve the styles&behaviour? I you have used a plugin, please let me know which one you've used

lhavCoder Over a year ago

Hi i got this far. plnkr.co/edit/pNiKKDHQEZ6KoZhEuDlO?p=preview . im trying to get the first one to get selected. see if it helps you

lhavCoder Over a year ago

the problem is that this uses jquery and angular doesnt go too well with jquery. they're trying to integrate semantic ui with angularjs and its in the testing stages from what i researched.

carmenism Over a year ago

Thanks for trying but it doesn't work for me. :( I think something else is interfering, but there is so much code involved in this application (which someone else built) that I'm really not sure how to trim it down and put it in a fiddle.

|

lhavCoder · Accepted Answer · 2017-03-29 16:24:11Z

1

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});  
 });

answered Mar 29, 2017 at 16:24

lhavCoder

9615 silver badges7 bronze badges

Collectives™ on Stack Overflow

Applying multiple CSS classes to an angular select?

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related