Hi All,
This log will help you to bind data to dropdown/html select control using AngularJS. Data is populated using webmethod.
<select ng-options="Country.CountryName for Country in CountryList" ng-model="selectedCountry">
</select>
Where CountryList is the JSON result from server. Country.CountryName -> will bind the country name to select options text and CountryID binds to select options value.
ASPX page:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Binddropdown.aspx.cs" Inherits="Binddropdown" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div ng-app="myApp" ng-controller="myCntrl">
<div ng-init="fillCountryList()"></div>
Country List :
<select ng-options="Country.CountryName for Country in CountryList" ng-model="selectedCountry">
</select>
<script>
var app = angular.module("myApp", []);
app.controller("myCntrl", function ($scope, $http) {
$scope.CountryList;
$scope.fillCountryList = function () {
var httpreq = {
method: 'POST',
url: 'Binddropdown.aspx/GetCountyList',
headers: {
'Content-Type': 'application/json; charset=utf-8',
'dataType': 'json'
},
data: {}
}
$http(httpreq).success(function (response) {
$scope.CountryList = response.d;
alert("Completed.");
})
};
});
</script>
</div>
</form>
</body>
</html>
C# Code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Binddropdown : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[System.Web.Services.WebMethod()]
public static List<CountryList> GetCountyList()
{
List<CountryList> list = new List<CountryList>();
list.Add(new CountryList(1,"India"));
list.Add(new CountryList(2,"USA"));
list.Add(new CountryList(3,"Canada"));
list.Add(new CountryList(4, "Italy"));
return list;
}
}
public class CountryList
{
public int CountryID;
public string CountryName;
public CountryList(int _CountryID, string _CountryName)
{
CountryID = _CountryID;
CountryName = _CountryName;
}
}
Happy Coding.....
0 Comment(s)