Dan Hodson February 2016

Conditionally showing options in a select with Angular

I am creating a template for showing Select fields in my app. However I have 4 different types of select field. value = id, value = name, value = static_id and value = static_name (it's complicated...).

I plan to migrate these to ngOptions if possible in the future, but for now I am attempting to have a single select template, that will handle all 4 types of field.

I currently use an ng-if to show the different 'static' code for a select, but this creates a lot of code that I want to reduce into this single template.

Here's some code:

// shows a basic select field where option value = id
<div ng-if="field.type=='select'" class="form-group">
    <select-field></select-field>
</div>

// shows a basic select field where option value = name
<div ng-if="field.type=='select_name'" class="form-group">
    <select-field></select-field>
</div>

// shows a basic select field where option value = static_id
<div ng-if="field.type=='select_static_id'" class="form-group">
    <select-field></select-field>
</div>

// shows a basic select field where option value = static_name
<div ng-if="field.type=='select_static_name'" class="form-group">
    <select-field></select-field>
</div>

Here, all the field attributes are identical, except for the generated options. Hence why I want to template this.

I am attempting to have this single template have another ng-if inside that will detect the field type, from the JSON it reads, and then change the options displayed accordingly, like this (2 of the 4 examples shown):

<select 
    name={{field.name}} 
    class="form-control form-field {{relationshipUrl}}"
    id={{field.name}} 
    data-is-autofocus={{field.focus}} 
    data-selectreq={{field.rules.selectreq}} 
    data-showhide={{field.rules.showhide}}
>
    <option value="" selected>Please select..        

Answers


Dan Hodson February 2016

Well no sooner had I posted, the answer was blindingly obvious. Instead of the above approach by removing the span and putting the ng-if on the <option> instead fixed the issue and it works perfectly!

<select 
    name={{field.name}} 
    class="form-control form-field {{relationshipUrl}}"
    id={{field.name}} 
    data-is-autofocus={{field.focus}} 
    data-selectreq={{field.rules.selectreq}} 
    data-showhide={{field.rules.showhide}}
>
    <option value="" selected>Please select...</option> 
    <option ng-if="field.type=='select'"
        value={{option.id}} 
        ng-repeat="option in cache[field.relationshipURL] | orderBy:'name || firstName'" 
        ng-selected="formData[field.name] == option.id">
            {{option.name || option.firstName}}
    </option>
    <option ng-if="field.type=='select_name'"
        value={{option.name}} 
        ng-repeat="option in cache[field.relationshipURL] | orderBy:'name'"
        ng-selected="formData[field.name] == option.name" >
            {{option.name}}
    </option>
    <option ng-if="field.type=='select_static_id'"
        value={{option.id}} 
        ng-repeat="option in cache[field.relationshipURL] | orderBy:'name'"
        ng-selected="formData[field.name] == option.id" >
            {{option.name}}
    </option>
    <option ng-if="field.type=='select_static_name'"
        value={{option.name}} 
        ng-repeat="option in cache[field.relationshipURL] | orderBy:'name'"
        ng-selected="formData[field.name] == option.name">
            {{option.name}}
    </option>
</select>

Thank you anyway @charlietfl very quick response.


Zonedark February 2016

I'm a bit late for the answer, but I managed to make a working JSFIDDLE of what I hoped you tried to accomplish.

I factorized your code into a single select and added another select to show you how to display either only one, or all of them.

<div>
        <select ng-model="selector">
        <option value=""></option>
        <option value="">Show everything</option>
            <option ng-repeat="option in Options" value="{{option.type}}">{{option.type}}</option>
        </select>
    </div>
   <div ng-repeat="option in Options"  ng-show="$parent.selector == option.type || $parent.selector == ''">
    {{option.type}}
    <select>
        <option ng-repeat="choice in option.choices" value="{{choice}}">{{choice}}</option>
    </select>
    </div>

And the data :

$scope.Options = [
{type:"id", choices:["0", "1", "2"]},
{type:"name", choices:["John", "Doe", "Smith"]},
{type:"static_id", choices:["3", "4", "5"]},
{type:"static_name", choices:["Static 1", "Static 2", "Static 3"]},
];

Post Status

Asked in February 2016
Viewed 2,437 times
Voted 13
Answered 2 times

Search




Leave an answer