在带有ng-options的选择下拉列表上ng-show on object array

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!

Answer 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.