CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveng-options
Chris
Chris

Reputation: 63

How do I disable options in angularjs with ng-options when using select as label

I've got these variables in a service:

months: [
        { label: 'January', value: 1, disabled: true },
        { label: 'February', value: 2, disabled: true },
        { label: 'March', value: 3, disabled: true },
        { label: 'April', value: 4, disabled: false },
        { label: 'May', value: 5, disabled: false },
        { label: 'June', value: 6, disabled: false },
        { label: 'July', value: 7, disabled: false },
        { label: 'August', value: 8, disabled: false },
        { label: 'September', value: 9, disabled: false },
        { label: 'October', value: 10, disabled: false },
        { label: 'November', value: 11, disabled: false },
        { label: 'December', value: 12, disabled: false }
    ],
currentMonth: 4

my select looks like this:

<select name="goalStartMonth" id="goalStartMonth" class="form-control gb-select" ng-model="startMonth" ng-change="frequencyUpdated()" ng-options="month.value as month.label for month in months"></select>

that works fine to build the <select>, but I want to disable the months before the current month (can't select a month in the past)

Angular docs for ng-options show:

"label disable when disable for value in array"

so I've tried:

<select name="goalStartMonth" id="goalStartMonth" class="form-control gb-select" ng-model="startMonth" ng-change="frequencyUpdated()" ng-options="month.value as month.label disable when month.value < currentMonth for month in months"></select>

That breaks the <select> - no options are rendered.

I also tried:

<select name="goalStartMonth" id="goalStartMonth" class="form-control gb-select" ng-model="startMonth" ng-change="frequencyUpdated()" ng-options="month.label disable when month.value < currentMonth for month in months"></select>

same result.

What am I missing here?

Upvotes: 1

Views: 12519

Answers (3)

Raja Rathinam
Raja Rathinam

Reputation: 112

You can disable using ngOptions in angular 1.4.1 or above

HTML template

<div ng-app="myapp">
<form ng-controller="ctrl">
    <select id="t1" ng-model="curval" ng-options='reportingType.code as reportingType.itemVal disable when reportingType.disable for reportingType in reportingOptions'>
        <option value="">Select Report Type</option>
    </select>

</form></div>

Controller code

angular.module('myapp',[]).controller("ctrl", function($scope){
$scope.reportingOptions=[{'code':'text','itemVal':'TEXT','disable':false}, {'code':'csv','itemVal':'CSV','disable':true}, {'code':'pdf','itemVal':'PDF','disable':false}];})

Upvotes: 1

cyber ice
cyber ice

Reputation: 383

I think I know why it's not working. I checked the ng-options documentation from Angular docs and noticed they had an example using that "label disable when disable for value in array" notation.

I tried changing from 1.4.0-beta.6 to 1.3.15 in their example on plnkr and it didn't work anymore.

It seems like it is a version issue.

If you check https://github.com/angular/angular.js/issues/638 you will see that this disable notation was recently added, as this issue was closed on February 18.

Upvotes: 2

brettvd
brettvd

Reputation: 486

One way to do this is to use an ng-repeat and ng-disabled on an <option> within the <select>, like this:

<select name="goalStartMonth" id="goalStartMonth" class="form-control gb-select" ng-model="startMonth" ng-change="frequencyUpdated()">
    <option ng-repeat="month in months" ng-disabled="month.value < currentMonth" >{{month.label}}</option>
</select>

Working JSFiddle here

EDIT

As was mentioned above, this feature was not available until the 1.4.0 beta. Here is a JSFiddle showing it works using the 1.4.0-beta.6 version of AngularJS

Upvotes: 5

Related Questions