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 · Answer 1 · 2016-04-01T14:33:21.873

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 01 '16 at 14:33

answered Apr 01 '16 at 14:13

Naigel

9,086
16
65
106

From what I've read, `ng-if` can't be used on an ` – millerbr Apr 01 '16 at 14:17
indeed you can use it ;) I corrected the mistake, `ng-repeat` in place of `ng-for` – Naigel Apr 01 '16 at 14:34
Is it possible the top answer on this post is just outdated then? http://stackoverflow.com/questions/23755801/angular-ng-if-inside-option-element-and-ng-repeat-not-working – millerbr Apr 01 '16 at 14:43
no it's not, it says that you can't insert html element (or tag, it's the same) inside an ` – Naigel Apr 01 '16 at 14:45
Oh i see now! My mistake haha – millerbr Apr 01 '16 at 14:52

score 1 · Answer 2 · answered Apr 01 '16 at 14:13

1

Try using ng-selected.
For example:

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

answered Apr 01 '16 at 14:13

MarcoS

17,323
24
96
174

millerbr · Answer 3 · 2016-04-01T15:03:04.353

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.

AngularJS Options in a Select based on a condition

3 Answers3