Question

我有3个下拉菜单，3个下拉菜单有相同的选项。

选项ex ... kiran，viran，charan，narine。

如果我在第一个下拉列表中选择kiran，则必须在剩余的下拉列表中显示（仅显示viran，charan，narine）。如果我在接下来的两个下拉菜单中选择viran。第三次下拉列表应该只显示charan和narine。

我的html中有3个范围变量用于3个下拉列表。你可以在下面看到，请帮助我们。

这是我的Html，我正在使用Angular Js：

<html>
<body>
    <div class="row">
        <div class="col-md-3 ">
            <div class="md-form">
                <div class="form-group ">
                    <label for="form76" class="active">Primary Physician:</label>
                    <select class="form-control mdb-select select-dropdown require" id="form37" name="ServiceProviderID" data-ng-model="residentprovider.pPhysician"
                            ng-options="item.ServiceProviderID as item.personbase.FullName for item in serviceProviders">
                        <option value="" disabled>Select Primary Physician</option>
                    </select>
                    <label class="active" for="form37">Primary Physician:</label>
                </div>
            </div>
        </div>
        <div class="col-md-3 ">
            <div class="md-form">

                <div class="form-group ">
                    <label for="form76" class="active">Secondary Physician:</label>
                    <select class="form-control mdb-select select-dropdown require" id="form38" name="ServiceProviderID" data-ng-model="residentprovider.sPhysician"
                            ng-options="item.ServiceProviderID as item.personbase.FullName for item in serviceProviders">
                        <option value="" disabled>Select Secondary Physician</option>
                    </select>
                    <label class="active" for="form38">Secondary Physician:</label>
                </div>
            </div>
        </div>
        <div class="col-md-3 ">
            <div class="md-form">

                <div class="form-group ">
                    <label for="form76" class="active">Alternate Physician:</label>
                    <select class="form-control mdb-select select-dropdown require" id="form39" name="ServiceProviderID" data-ng-model="residentprovider.aPhysician"
                            ng-options="item.ServiceProviderID as item.personbase.FullName for item in serviceProviders">
                        <option value="" disabled>Select Alternate Physician</option>
                    </select>
                    <label class="active" for="form39">Alternate Physician:</label>
                </div>
            </div>
        </div>
    </div>
    <button type="button" class="btn btn-success btn-sm" ng-click="createOrUpdateResidentProvider()">SAVE</button>
    <button type="button" class="btn btn-danger btn-sm" id="CancelProblems_btn" ng-click="resetResident()">CANCEL</button>
</body>
</html>

<script>
    $scope.createOrUpdateResidentProvider = function () {
        blockUI.start();
        $scope.providers = true;
        $scope.residentprovider.ResidentID = $scope.selectedResidentID;
        $scope.residentprovider.FacilityID = $scope.selectedFacilityID;
        $scope.residentprovider.PrimaryPhysician = $scope.residentprovider.pPhysician;
        $scope.residentprovider.SecundaryPhysician = $scope.residentprovider.sPhysician;
        $scope.residentprovider.AlternatePhysician = $scope.residentprovider.aPhysician;
        residentService.post($scope.constants.API.CREATE_NEW_RESIDENT_PROVIDER, $scope.residentprovider).then(
            function (response) {
                toaster.pop('success', response.message);
                blockUI.stop();
            },
            function (response) {
                toaster.pop('error', response.message);
                blockUI.stop();
            })
    }
</script>

Answer 1

在...... ng-options="item.ServiceProviderID as item.personbase.FullName disable when residentprovider.sPhysician == item.ServiceProviderID for item in serviceProviders"

时使用禁用功能

var app = angular.module('myApp',[]);

app.controller('appCtrl', function($scope){

$scope.serviceProviders =[{"ServiceProviderID":1,personbase:{"FullName":"AAA"}},{"ServiceProviderID":2,personbase:{"FullName":"BBB"}},{"ServiceProviderID":3,personbase:{"FullName":"CCC"}}];

 $scope.createOrUpdateResidentProvider = function () {
                
                $scope.providers = true;
                $scope.residentprovider.ResidentID = $scope.selectedResidentID;
                $scope.residentprovider.FacilityID = $scope.selectedFacilityID;
                $scope.residentprovider.PrimaryPhysician = $scope.residentprovider.pPhysician;
                $scope.residentprovider.SecundaryPhysician = $scope.residentprovider.sPhysician;
                $scope.residentprovider.AlternatePhysician = $scope.residentprovider.aPhysician;
                }

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="appCtrl">
<div class="row">

    <div class="col-md-3 ">
        <div class="md-form">
            <div class="form-group ">
                <label for="form76" class="active">Primary Physician:</label>
                <select class="form-control mdb-select select-dropdown require" id="form37" name="ServiceProviderID" data-ng-model="residentprovider.pPhysician"
                    ng-options="item.ServiceProviderID as item.personbase.FullName disable when residentprovider.sPhysician == item.ServiceProviderID for item in serviceProviders" >
                                            <option value="" disabled>Select Primary Physician</option></select>
                                              <label class="active" for="form37">Primary Physician:</label>
        </div>
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="md-form">

            <div class="form-group ">
                <label for="form76" class="active">Secondary Physician:</label>
                <select class="form-control mdb-select select-dropdown require" id="form38" name="ServiceProviderID" data-ng-model="residentprovider.sPhysician"
                    ng-options="item.ServiceProviderID as item.personbase.FullName disable when residentprovider.pPhysician == item.ServiceProviderID for item in serviceProviders" >
                                            <option value="" disabled>Select Secondary Physician</option></select>
                                              <label class="active" for="form38">Secondary Physician:</label>
        </div>
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="md-form">

            <div class="form-group ">
                <label for="form76" class="active">Alternate Physician:</label>
                <select class="form-control mdb-select select-dropdown require" id="form39" name="ServiceProviderID" data-ng-model="residentprovider.aPhysician"
                    ng-options="item.ServiceProviderID as item.personbase.FullName disable when residentprovider.sPhysician == item.ServiceProviderID || residentprovider.pPhysician == item.ServiceProviderID for item in serviceProviders">
                                            <option value="" disabled>Select Alternate Physician</option></select>
                                              <label class="active" for="form39">Alternate Physician:</label>
        </div>
        </div>
    </div>
</div>
<br>{{residentprovider.pPhysician}} 
{{residentprovider.sPhysician}}  {{residentprovider.aPhysician}}<br>
<button type="button" class="btn btn-success btn-sm" ng-click="createOrUpdateResidentProvider()">SAVE</button>
<button type="button" class="btn btn-danger btn-sm" id="CancelProblems_btn" ng-click="resetResident()">CANCEL</button>

</body>

Answer 2

ng-change事件的下拉列表可用于更改其他下拉列表的选项

例如。

<div ng-app="App" >
 <div ng-controller="ctrl">
 option 1:
<select id="ddl1"  ng-model="dataSelected1" ng-change="removeValue(dataSelected1)" 
     data-ng-options="data as data.name for data in datas">
    <option value="">Select</option>
</select>
<br/>
option 2:
<select id="ddl2" ng-model="dataSelected2" 
     data-ng-options="data as data.name for data in datas">
    <option value="">Select</option>
</select>

  </div>       
</div>


$scope.datas=[{id:1,name:"kiran"},{id:2,name:"viran"},{id:3,name:"charan"},{id:4,name:"narine"}]

    $scope.removeValue=function(item){
    alert(item.name);

    $('#ddl2 option')
    .filter(function(i, e) { return $(e).text() == item.name}).remove();

    }

demo示例

demo已更新

下拉绑定和从剩余下拉列表中删除选项

2 个答案: