Search code examples
phpmysqlangularjsng-options

Multiple ng-options dropdowns not working properly?


I am new in angular using ng-options to display values in drop downs. i have total 4 drop down lists in one form. If i select first dropdown's value and then goes to second drop down to select any value then first drop down's value will vanished. same happens for third and four. at last only fourth dropdown's selected value i can see. And on success form i want to display pop up. below is my code for dropdowns and script.

<select ng-model="empInfo" ng-options="emp.candidate_name for emp in names4" class="span2">
</select>                       

<select ng-model="empInfo" ng-options="emp.company_name for emp in names" class="span2">
</select>                       

<select ng-model="empInfo" ng-options="emp.designation_type for emp in names1" class="span2">                                           
</select>


var app = angular.module('myApp', ['720kb.datepicker']);
app.controller('MyController', function($scope, $http) {
    $http.get("http://www.adhr.adnacgroup.com/ADHRM/companyJson.php")
    .then(function(response) {
        $scope.names = $scope.names = response.data.service;
    });

    $http.get("http://www.adhr.adnacgroup.com/ADHRM/designationJson.php")
    .then(function(response) {
        $scope.names1 = $scope.names1 = response.data.service;
    });

    $http.get("http://www.adhr.adnacgroup.com/ADHRM/finalCandidatesJson.php")
    .then(function(response) {
        $scope.names4 = $scope.names4 = response.data.service;
    });

    $scope.insertInfo = function(info) {
        $http.post('addconfirmation.php?confirmation=',{
            "referal_code":info.referal_code,
            "candidate_id":info.candidate_id,
            "company_id":info.company_id,
            "designation_type_id":info.designation_type_id,
            "address":info.address,
            "joiningdate":info.joiningdate,
        }).success(function(data1) {
            if (data1 == true) 
            {
                getInfo();          
                $('#empForm').css('display', 'none');
            }
        });
}

Solution

  • You have to assign different scope on each dropdown. Having same ng-model on each select tag then one overrides the other.

    e.g. :

    <select  ng-model="empInfo1" ng-options="emp.company_name for emp in names">
    <select  ng-model="empInfo2" ng-options="emp.company_name for emp in names">