ng-show on array of objects on select dropdown with ng-options

Question

I am using the ng-options to iterate over my array of objects and display the proper list of statuses to the view as well as bind what i need to the model.

There are two states that this view can be in at any given time and one is an empty workOrder or a workOrder that already has values.

Now i would like in the instance that a workOrder has returned with a status of 'A' or an 'Active' status, the 'Closed' and 'Processing' statuses will not display in the dropdown.

I would like to use ng-show for this but would also like to know if there is a more appropriate method of going about solving this.

my objects:

workOrder.statuses = [
        {
            'Status': 'Open',
            'Code': 'O',
            'Show': true
        },
        {
            'Status': 'Active',
            'Code': 'A',
            'Show': true
        },
        {
            'Status': 'Processing',
            'Code': 'P',
            'Show': true
        },
        {
            'Status': 'Closed',
            'Code': 'C',
            'Show': true
        }
    ];

my HTML on which i am using:

<select title="Status" class="form-control" id="ddlStatus"
                    ng-options="status.Code as status.Status for status in ctrl.statuses"
                    ng-model="ctrl.model.Status">
</select>

I am running into issues on trying to get this to work and nothing seems to work and searching through StackOverflow i was unable to find a solid answer.

Any help is much appreciated!

Markiyan Harbych · Accepted Answer · 2016-06-14 16:59:06Z

1

First of all, you can just filter your options array like this:

<li ng-repeat="status.Code as status.Status for status in ctrl.statuses | filter : {Status: 'Open'}: true">

Second of all, you can populate select with the options like this

<select name="repeatSelect" id="repeatSelect" ng-model="data.repeatSelect">
  <option ng-repeat="option in data.availableOptions" value="{{option.id}}">{{option.name}}</option>
</select>

So you can specify there with 'ng-if' to hide the options with status you don't want to show

Update:

So you can use filter:

<option ng-repeat="status in ctrl.statuses | filter : {Status: '!' + ctrl.model.Status}: true" value='{{status.Code}}'>{{status.Status}}</option>

Or if you don't want to use ng-repeat, you can just filter the options array in the scope when the selected status is changed.

edited Jun 14, 2016 at 16:59

answered Jun 14, 2016 at 16:18

Markiyan Harbych

1897 bronze badges

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

7 Comments

Keeano Over a year ago

I would prefer to use ng-options instead of ng-repeat. As well this still would not answer my question. My results are perfect and bind just as expected. I just would like to be able to know when the current model coming back has an "Active" status and hide the options that dont need to be in the dropdown selection

Keeano Over a year ago

i forgot to tag you @Markiyan Harbych

Markiyan Harbych Over a year ago

Could you specify what do you mean by - 'coming back' ?

Markiyan Harbych Over a year ago

Because now I can see that my first example with the filter should work perfect for you, because you can just filter on your selected status value. But if it's not the case - please, provide a bit more info.

Markiyan Harbych Over a year ago

I'm glad that it helped!

|

Collectives™ on Stack Overflow

ng-show on array of objects on select dropdown with ng-options

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related