禁用具有特定标签的多项选择的 optgroup

Question

我使用ng-options 选择了一个包含多个选项的选择列表。我使用它如下：

<select ng-options="c as c.Text for c in ReceiverList track by c.Value" ng-model="ReceiverUserID" class="form-control" id="ddlReceiverUserID" ng-change="GetWorkers(ReceiverUserID, SenderUserID,'receiver')">
   <option value="">--Select Supervisor--</option>
</select>       <!-- Parent Drop Down-->

<select multiple ng-options="c as c.Text group by c.Group 
        for c in receiveList track by c.Value" ng-model="Workers" 
        class="form-control" id="ddlWorkers" size="10">
</select>           <!-- Child Drop Down -->

当我从另一个下拉列表中选择某些项目时，此选择下拉列表会被填充。（这是一种级联下拉列表）。填写如下：

$scope.GetWorkers = function (objA, objB, ddlType) {
  $http.post("user/Workers/", { userID: objA.Value })
      .success(function (data, status, headers, config) {
          if (ddlType == 'sender') {
              $scope.sendList = data;
          } else {
              $scope.receiveList = data;
              $('#ddlWorkers optgroup[label="Current Users"] option').prop('disabled', true); // Not working
          }
      })
      .error(function (data, status, headers, config) {
          showToast(ToastType.error, "Error occured while fetching workers.", "Failure");
      });
 }

我想禁用子下拉菜单的特定组项。所以我尝试了下面的代码，但它不起作用：

$('#ddlWorkers optgroup[label="Current Users"] option').prop('disabled', true);

我不知道如何在数据更改或加载新数据时禁用特定的 select 组项。

这是我想要禁用所有 optgroup[label="Current Users"] 成员的 HTML 输出：

<select multiple="" ng-options="c as c.Text group by c.Group for c in receiveList track by c.Value" ng-model="Workers" class="form-control ng-pristine ng-valid" id="ddlWorkers" size="10">
    <optgroup label="Current Users">
        <option value="4118">Kevins Numen</option>
        <option value="4119">ggdfg fdgdfg</option>
    </optgroup>
    <optgroup label="New Users">
        <option value="1093">Case Worker</option>
    </optgroup>
</select>

Answer 1

我对 angularjs 或 ng-options 了解不多，但似乎其他人都使用了一些超时来让进程将接收到的数据填充到输入中，你可以像其他人一样尝试这样的事情：

... 
} else {
    $scope.receiveList = data;
    setTimeout(function(){        
        $('#ddlWorkers optgroup[label="Current Users"] option')
          .prop('disabled', true); // Not working
    }, 100);
}
...

可能不相似，但可以在这里看看：

is there a post render callback for Angular JS directive?

Answer 2

您需要自定义代码以及 JSON 对象

 <div ng-controller="AjaxCtrl">
      <h1>AJAX - Oriented</h1>
    <div>
        Country: 
        <select id="country" ng-model="country" ng-options="country for country in countries">
          <option value=''>Select</option>
        </select>
    </div>
    <div>
        City: <select id="city" ng-disabled="!cities" ng-model="city"><option value='' ng-repeat="item in cities" ng-disabled="item.disabled">{{item.name}}</option></select>
    </div>
    <div>
        Suburb: <select id="suburb" ng-disabled="!suburbs" ng-model="suburb" ng-options="suburb for suburb in suburbs"><option value=''  ng-disabled="item.disabled" ></option></select>        
    </div>
</div>

你的角度

function AjaxCtrl($scope) {
    $scope.countries = ['usa', 'canada', 'mexico', 'france'];
    $scope.$watch('country', function(newVal) {

        if (newVal) 
$scope.cities = [
    { id: 1, name: '11111'},
    { id: 2, name: '22222', disabled: true },
    { id: 3, name: '33333', disabled: true }
]

    });
    $scope.$watch('city', function(newVal) {
        if (newVal) $scope.suburbs = ['SOMA', 'Richmond', 'Sunset'];
    });
}

function AjaxCtrl($scope) {
    $scope.countries = ['usa', 'canada', 'mexico', 'france'];
    $scope.$watch('country', function(newVal) {
       
        if (newVal) 
$scope.cities = [
    { id: 1, name: '11111'},
    { id: 2, name: '22222', disabled: true },
    { id: 3, name: '33333', disabled: true }
]

    });
    $scope.$watch('city', function(newVal) {
        if (newVal) $scope.suburbs = ['SOMA', 'Richmond', 'Sunset'];
    });
}

<link href="http://fiddle.jshell.net/css/normalize.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<div ng-controller="AjaxCtrl" class="ng-scope">
      <h1>AJAX - Oriented</h1>
    <div>
        Country: 
        <select id="country" ng-model="country" ng-options="country for country in countries" class="ng-valid ng-dirty"><option value="" class="">Select</option><option value="0">usa</option><option value="1">canada</option><option value="2">mexico</option><option value="3">france</option></select>
    </div>
    <div>
        City: <select id="city" ng-disabled="!cities" ng-model="city" class="ng-valid ng-dirty"><!-- ngRepeat: item in cities --><option value="" ng-repeat="item in cities" ng-disabled="item.disabled" class="ng-scope ng-binding">11111</option><option value="" ng-repeat="item in cities" ng-disabled="item.disabled" class="ng-scope ng-binding" disabled="disabled">22222</option><option value="" ng-repeat="item in cities" ng-disabled="item.disabled" class="ng-scope ng-binding" disabled="disabled">33333</option></select>
    </div>
    <div>
        Suburb: <select id="suburb" ng-disabled="!suburbs" ng-model="suburb" ng-options="suburb for suburb in suburbs" class="ng-pristine ng-valid" disabled="disabled"><option value="" ng-disabled="item.disabled" class=""></option></select>        
    </div>
</div>

Reference