To FIll dropdown list using angularjs in different ways like static ,dynamic and using rest api as well
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('sampleapp', [])
app.controller('samplecontrol', function ($scope) {
$scope.sample = [{
id: '1',
name: '-- select --'
}, {
id: '2',
name: '.Net'
}, {
id: '3',
name: 'Java'
}, {
id: '4',
name: 'PHP'
}, {
id: '5',
name: 'Angularjs'
}, {
id: '6',
name: 'Nodejs'
}];
});
</script>
<script type="text/javascript">
angular.module('drpdwnApp', []).controller('drpdwnCtrl', function ($scope, $http) {
$scope.ProductList = null;
//Declaring the function to load data from database
$scope.fillProductList = function () {
$http({
method: 'post',
url: 'AngularCascadingDropDownList.aspx/GetProductList',
data: {}
}).success(function (result) {
$scope.ProductList = result.d;
});
};
//Calling the function to load the data on pageload
$scope.fillProductList();
});
</script>
</head>
<body>
<form id="form1">
Select Name:
<select class="form-control-small"
ng-model="view.activeResource.ValueType">
<option value="0">Test</option>
<option value="2">Test2</option>
<option value="1">Test3</option>
</select>
<br />
<br />
<br />
<br />
<!--<div data-ng-app="sampleapp" data-ng-controller="samplecontrol">
Select Name2:
<select>
<option data-ng-repeat="t in sample" value="{{t.id}}">{{t.name}}</option>
</select>
</div>-->
<br />
<br />
<br />
<br />
<br />
<br />
<div ng-app="drpdwnApp" ng-controller="drpdwnCtrl">
<select ng-model="drpdpwnvalue" ng-options="item.ShipAddress for item in ProductList">
<option value="" label="Select and item"></option>
</select>
</div>
</form>
</body>
</html>
SERVERSIDE CODE
[System.Web.Services.WebMethod()]
public static List<OrderList> GetProductList()
{
List<OrderList> list = new List<OrderList>();
using (SqlConnection conn = new SqlConnection(
ConfigurationManager.ConnectionStrings["ConnectionStringName"].ConnectionString))
{
conn.Open();
string strquery = "Select * from Tablename";
using (SqlCommand cmd = new SqlCommand(strquery, conn))
{
SqlDataReader reader = cmd.ExecuteReader();
while (reader.Read())
{
OrderList objorder = new OrderList(int.Parse(reader["OrderID"].ToString()),
reader["ShipName"].ToString(),
reader["ShipAddress"].ToString(),
double.Parse(reader["Freight"].ToString()));
list.Add(objorder);
}
}
}
return list;
}
}
public class OrderList
{
public int OrderID;
public string ShipName;
public string ShipAddress;
public double Freight;
public OrderList(int orderID, string shipName, string shipAddress, double freight)
{
OrderID = orderID;
ShipName = shipName;
ShipAddress = shipAddress;
Freight = freight;
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('sampleapp', [])
app.controller('samplecontrol', function ($scope) {
$scope.sample = [{
id: '1',
name: '-- select --'
}, {
id: '2',
name: '.Net'
}, {
id: '3',
name: 'Java'
}, {
id: '4',
name: 'PHP'
}, {
id: '5',
name: 'Angularjs'
}, {
id: '6',
name: 'Nodejs'
}];
});
</script>
<script type="text/javascript">
angular.module('drpdwnApp', []).controller('drpdwnCtrl', function ($scope, $http) {
$scope.ProductList = null;
//Declaring the function to load data from database
$scope.fillProductList = function () {
$http({
method: 'post',
url: 'AngularCascadingDropDownList.aspx/GetProductList',
data: {}
}).success(function (result) {
$scope.ProductList = result.d;
});
};
//Calling the function to load the data on pageload
$scope.fillProductList();
});
</script>
</head>
<body>
<form id="form1">
Select Name:
<select class="form-control-small"
ng-model="view.activeResource.ValueType">
<option value="0">Test</option>
<option value="2">Test2</option>
<option value="1">Test3</option>
</select>
 |
| Fill dropdownlist using angularjs |
<br />
<br />
<br />
<br />
<!--<div data-ng-app="sampleapp" data-ng-controller="samplecontrol">
Select Name2:
<select>
<option data-ng-repeat="t in sample" value="{{t.id}}">{{t.name}}</option>
</select>
</div>-->
<br />
<br />
<br />
<br />
<br />
<br />
<div ng-app="drpdwnApp" ng-controller="drpdwnCtrl">
<select ng-model="drpdpwnvalue" ng-options="item.ShipAddress for item in ProductList">
<option value="" label="Select and item"></option>
</select>
</div>
</form>
</body>
</html>
SERVERSIDE CODE
[System.Web.Services.WebMethod()]
public static List<OrderList> GetProductList()
{
List<OrderList> list = new List<OrderList>();
using (SqlConnection conn = new SqlConnection(
ConfigurationManager.ConnectionStrings["ConnectionStringName"].ConnectionString))
{
conn.Open();
string strquery = "Select * from Tablename";
using (SqlCommand cmd = new SqlCommand(strquery, conn))
{
SqlDataReader reader = cmd.ExecuteReader();
while (reader.Read())
{
OrderList objorder = new OrderList(int.Parse(reader["OrderID"].ToString()),
reader["ShipName"].ToString(),
reader["ShipAddress"].ToString(),
double.Parse(reader["Freight"].ToString()));
list.Add(objorder);
}
}
}
return list;
}
}
public class OrderList
{
public int OrderID;
public string ShipName;
public string ShipAddress;
public double Freight;
public OrderList(int orderID, string shipName, string shipAddress, double freight)
{
OrderID = orderID;
ShipName = shipName;
ShipAddress = shipAddress;
Freight = freight;
}
}
Please click on below link
ReplyDeletehttp://www.fledgequality.somee.com