dropdown list bind in MVC using angularjs

Aug 18 2017 6:21 AM
 
 Can any one tell what is the error???
 $scope.country = response;
Here value is coming properly but in dropdown list data is not binding ..it showing undefined....
 
 
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<script type="text/javascript">
//Module
var myApp = angular.module('myApp', []);
//Controller
myApp.controller('MainCtrl', ['$scope', '$http',
function ($scope, $http) {
debugger;
$scope.country = [];
$scope.selectedcountry = null;
$http.get('/Employee/GetCountry').then(function (response) {
$scope.country = response;
});
}]);
</script>
<div data-ng-app="myApp">
<div data-ng-controller="MainCtrl">
<select ng-model="selectedcountry"
ng-options="item.countryId as item.countryName for item in country">
<option value="">Select country</option>
</select>
</div>
</div>
 
============Controller Code======================= 
public class Country
{
public int countryId { get; set; }
public string countryName { get; set; }
}
[HttpGet]
public JsonResult GetCountry()
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["con"].ToString());
con.Open();
SqlCommand cmd = new SqlCommand("getAllCountry", con);
cmd.CommandType = CommandType.StoredProcedure;
SqlDataAdapter adp = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
adp.Fill(dt);
con.Close();
DataSet ds = new DataSet();
ds.Merge(dt);
List<Country> listrs = new List<Country>();
foreach (DataRow dr in ds.Tables[0].Rows)
{
listrs.Add(new Country
{
countryId = Convert.ToInt32(dr["countryId"]),
countryName = dr["countryName"].ToString(),
});
}
return Json(listrs, JsonRequestBehavior.AllowGet);
}
 
============== 
 

Answers (1)