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 =“当前用户”]成员的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

您需要自定义代码以及 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'];
    });
}

＆＃13;

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'];
    });
}

＆＃13;

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

＆＃13;

Reference

Answer 2

我不太了解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?

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

2 个答案: