Is it possible to use ng-options
that it will render into disabled rows based on criteria?
this:
<select ng-options="c.name group by c.shade for c in colors">
maybe possible to turn into something like this:
<select ng-options="c.name group by c.shade for c in colors | disabled(c.shade)">
and let's say via a filter that could return disabled='disabled'
for all the colors that have shade = "dark"
<select> <optgroup label="dark"> <option value="0" disabled="disabled">black</option> <option value="2" disabled="disabled">red</option> <option value="3" disabled="disabled">blue</option> </optgroup> <optgroup label="light"> <option value="1">white</option> <option value="4">yellow</option> </optgroup> </select>
Or you can use ng-disabled="condition1 || condition2" , is depend of you logic conditional.
In AngularJS when you are using ng-options, you can filter out the options by calling a custom function you have in the controller. Let's say you have following set of employees and when you display all these employees inside HTML select using ng-options, you can see all the employees in a dropdown.
In my opinion the correct way to set a default value is to simply pre-fill your ng-model property with the value selected from your ng-options , angular does the rest. Essentially when you define the $scope property your select will bind to assign it the default value from your data array.
The ng-options directive fills a <select> element with <options>. The ng-options directive uses an array to fill the dropdown list. In many cases it would be easier to use the ng-repeat directive, but you have more flexibility when using the ng-options directive.
@lucuma's answer (originally the accepted answer) was correct, but by now should be updated, because this was fixed in Angular 1.4. See the docs of ng-options which also contains an example.
I'm using Angular 1.5 and this works for me:
<select ng-model="$ctrl.selectedItem" ng-options="item as item.label disable when item.disabled for item in $ctrl.listItems">
vm.items = [ { id: 'optionA', label: 'Option A' }, { id: 'optionB', label: 'Option B (recommended)' }, { id: 'optionC', label: 'Option C (Later)', disabled: true } ]; vm.selectedItem = vm.items[1];
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With