Keeano Keeano - 2 years ago 98
AngularJS Question

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

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"

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 Source

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>

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


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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download