CODEWITHSUNDEEP
javascripthtmlangularjs
vamsi
vamsi

Reputation: 151

dropdown binding and removing option from remaining dropdowns

I have 3 dropdowns and that 3 dropdowns has same options.

options ex... kiran, viran, charan, narine.

If i select kiran in first dropdown that has to be not showing in remaining dropdowns(should show only viran, charan,narine). And if i select viran in next two dropdowns of anyone. The 3rd dropdown should show only charan and narine.

And i have 3 scope variables in my html for 3 dropdowns. u can see below please help me guys.

Here is my Html and am using Angular Js for this:

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

Upvotes: 1

Views: 99

Answers (2)

Komal
Komal

Reputation: 304

ng-change event of dropdown can be used to change the options of other dropdown

for eg.

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

demo Updated

Upvotes: 0

Manikandan Velayutham
Manikandan Velayutham

Reputation: 2228

Use disable when ... 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>

Upvotes: 1

Related Questions