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