AngularJS Options in a Select based on a condition

Question

I have a <select> element, which will possibly have a default <option> set based on a condition - that condition being if another user has previously submitted the form and created the object being submitted. However, it seems I can't apply ng-if to an Option element (or any tags) and I'm finding it hard to come up with a solution.

Currently, my code looks like:

<select
    id="someId"
    ng-options="(item?'Yes':'No') for item in [true, false]"
    class="someClass"
    ng-class="someMethodToGetDynamicClass('this')
    ng-model="myObject.thisOption"
    ng-disabled="valueCheckingIfThisObjectHasBeenPreviouslySubmitted">
    <option ng-if="valueCheckingIfThisObjectHasBeenPreviouslySubmitted" selected>{{myObject.thisOption}}</option>
</select>

The selected option should only be set if valueCheckingIfThisObjectHasBeenPreviouslySubmitted is true - this means someone else has submitted the form before, and so the value has been set and should only be displayed.

Naigel · Accepted Answer · 2016-04-01 14:33:21Z

2

You can use a filter or, easier option, avoid ng-options attribute on <select> and use instead ng-repeat on <option> element

I simplify your code to provide a fast example (and even because I can't see the cycle part... You simplified it and something went lost? Or maybe it's just friday afternoon and I can't see it :)

<select ng-options="item for item in items" ng-model="selectedItem">
</select>

This would become

<select ng-model="selectedItem">
    <option ng-repeat="item for item in items" ng-if="item === yourConditionVariableOrElse">{{item}}<option>
</select>

I hope the procedure it's clear even with the simplifications.

edited Apr 1, 2016 at 14:33

answered Apr 1, 2016 at 14:13

Naigel

9,76417 gold badges73 silver badges111 bronze badges

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

5 Comments

millerbr Over a year ago

From what I've read, ng-if can't be used on an <option> tag - am I mistaken?

Naigel Over a year ago

indeed you can use it ;) I corrected the mistake, ng-repeat in place of ng-for

millerbr Over a year ago

Is it possible the top answer on this post is just outdated then? stackoverflow.com/questions/23755801/…

Naigel Over a year ago

no it's not, it says that you can't insert html element (or tag, it's the same) inside an <option> element, but I'm only using attributes here: And he's using attributes too

millerbr Over a year ago

Oh i see now! My mistake haha

MarcoS · Accepted Answer · 2016-04-01 14:13:35Z

1

Try using ng-selected.
For example:

 <option ng-selected="valueCheckingIfThisObjectHasBeenPreviouslySubmitted">{{myObject.thisOption}}</option>

answered Apr 1, 2016 at 14:13

MarcoS

17.8k27 gold badges101 silver badges189 bronze badges

Comments

millerbr · Accepted Answer · 2016-04-01 15:03:04Z

0

Ok based on MarcoS' answer and Naigels suggestion to use ng-repeat, I think I've solved it like so:

<select
id="someId"
class="someClass"
ng-class="someMethodToGetDynamicClass('this')
ng-model="myObject.thisOption"
ng-disabled="valueCheckingIfThisObjectHasBeenPreviouslySubmitted">
<option ng-repeat="item in [{'k':true, 'v':'Yes'}, {'k':false, 'v':'No'}] ng-selected="valueCheckingIfThisObjectHasBeenPreviouslySubmitted && item.k == myObject.thisOption" >{{item.v}}</option>

The ng-repeat now repeats across an array of objects storing my value to be checked on ('k'), and a display label ('v'). ng-selected then checks if valueCheckingIfThisObjectHasBeenPreviouslySubmitted is trueand if the current item.k is equal to the submitted value.

edited Apr 1, 2016 at 15:03

answered Apr 1, 2016 at 14:28

millerbr

2,9411 gold badge16 silver badges25 bronze badges

Collectives™ on Stack Overflow

AngularJS Options in a Select based on a condition

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related