如何使用AngularJs从ng-options中禁用选项?

时间:2016-05-18 17:20:59

标签: javascript angularjs

当用户打开模态窗口时,我正在调用rest服务以获取下面代码中的data的布尔标志,现在如果该标志为true,我想禁用ng-options中的选项,其中id为{{1} }。如何根据以下逻辑禁用下拉选项?

main.html中

RA_ATTST_LANGUAGE

main.js

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

dropdown.json

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();
           };

2 个答案:

答案 0 :(得分:3)

*由于进一步解释而编辑

尝试将ng-options属性更新为:

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

您需要为您的作用域创建一个布尔成员,根据其余结果设置为true或false。我称之为$ scope.disableRA_ATTST_LANGUAGE

Plunker for demonstration

答案 1 :(得分:0)

假设代码中的其他所有内容都是正确的,并且您的服务在dropdown.json中为每个实例进行一次调用;如果您只需要知道数据是否存在并且不需要获取实际数据内容,那么快速而肮脏的方法是将名称存储在数组中并检查该数组中是否存在id使用ng-disabled指令。你的变量名称令人困惑,所以我只是对它们进行了通用化,并为你的选择选项调用了源数组&#34; items&#34;

你的js需要这样的东西

 // 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);
            }
      });
    };

在你的模板中是这样的:

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