How to disabled option from ng-options using AngularJs?

Question

when user open modal window i am calling rest service to get boolean flag that is data in below code, Now if that flag is true i want to disable option in ng-options where id is RA_ATTST_LANGUAGE. How can i disabled dropdown option based on below logic ?

main.html

<select name="adminNotificationTypeCode" class="form-control" ng-model="messageNotificationDTO.adminNotificationTypeCode" required id="adminNotificationTypeCode" ng-change="attestationCheck()" ng-options="adminDataSource.id as adminDataSource.text disable when adminDataSource.id == 'RA_ATTST_LANGUAGE' && disableRA_ATTST_LANGUAGE for adminDataSource in adminDataSource">
                            <option value="">Select...</option>
                        </select>

main.js

function getAttestationLanValidation (){
          MessageAdminNotificationFactory.getAttestationLanValidation().then(function(response){
            if(response){
              $scope.disableRA_ATTST_LANGUAGE = response.data;
            }
          });
        };

           //Add new Notification
           $scope.addMessageNotification = function() {
               $scope.messageNotificationModal.open().center();
               $scope.clearNotificationForm();
               getAttestationLanValidation();
           };

dropdown.json

[{
    "uid": null,
    "index": 0,
    "selected": null,
    "expanded": null,
    "id": "RA_PLTFRM_NOTIF",
    "text": "Platform Maintenance Notification",
    "parentId": null,
    "items": null
}, {
    "uid": null,
    "index": 0,
    "selected": null,
    "expanded": null,
    "id": "RA_ATTST_LANGUAGE",
    "text": "Attestation Language",
    "parentId": null,
    "items": null
}]

Doug S. · Accepted Answer · 2016-05-18 18:07:57Z

3

*Edited due to further explanation

try updating your ng-options attribute to this:

 ng-options="adminDataSource.id as adminDataSource.text disable when adminDataSource.id == 'RA_ATTST_LANGUAGE' && disableRA_ATTST_LANGUAGE for adminDataSource in adminDataSource"

you will want to create a Boolean member to your scope that you set to true or false depending on the rest result.. I called it $scope.disableRA_ATTST_LANGUAGE

Plunker for demonstration

edited May 18, 2016 at 18:07

answered May 18, 2016 at 17:36

Doug S.

6822 gold badges10 silver badges26 bronze badges

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

5 Comments

hussain Over a year ago

its not based on id its based on boolean value data if rest service response is true then we will disabled RA_ATTST_LANGUAGE from dropdown

hussain Over a year ago

but it looks like you are disbaling whole dropdown option i just want to disable option that is part of dropdown

hussain Over a year ago

got this error

Error: [$parse:syntax] Syntax Error: Token 'disable' is an unexpected token at column 22 of the expression [adminDataSource.text disable when adminDataSource.id == 'RA_ATTST_LANGUAGE' && disableRA_ATTST_LANGUAGE] starting at [disable when adminDataSource.id == 'RA_ATTST_LANGUAGE' && disableRA_ATTST_LANGUAGE]

updated question

Doug S. Over a year ago

What version of angular are you guys using? The disable attribute was added in 1.4.something.

hussain Over a year ago

we are using angular 1.3

Jeremy Hull · Accepted Answer · 2016-05-18 18:25:38Z

Assuming everything else is correct in your code, and that your service is making a single call per instance in your dropdown.json; If you only need to know if data is present and don't need to get the actual data content, a quick-and-dirty way is to just store the name in an array and check for presence of the id in that array using the ng-disabled directive. Your variable names were confusing, so I just genericized them and called the source array for your select options "items"

Your js needs something like this

 // create an empty array when initializing
    $scope.thatArrayOfIdsThatHaveData = [];
    function getAttestationLanValidation() {
      MessageAdminNotificationFactory.getAttestationLanValidation()
          .then(function(response) {
            var data = response.data;
            console.log('attestation', data);
            if (data) {
              thatArrayOfIdsThatHaveData.push(id);
            }
      });
    };

In your template something like this:

<select ng-model="messageNotificationDTO.adminNotificationTypeCode"
        ng-change="attestationCheck()">
  <option value="">Select...</option>
  <option ng-repeat="item in items" 
          value="item.id"
          ng-disabled="thatArrayOfIdsThatHaveData.indexOf(item.id)>=0">{{ item.label }}</option> 
</select>

Collectives™ on Stack Overflow

How to disabled option from ng-options using AngularJs?

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related