Populate Dropdown In Angular Way
07:15
Introduction
In this post I want to show how to populate a dropdown with angularjs and Database.Database Table
Procudure
create procedure sp_getProfile
As
Begin
select *
from [dbo].[tbl_ProfileMaster]
End
app.js
var app = angular.module('myApp', []);
app.controller('ctrlloginSignup', function ($scope, $http) {
$scope.selectedProfile = null;
$scope.getProfile = [];
$http({
method: 'GET',
url: '/Test/getProfile'
}).success(function (result) {
$scope.getProfile = result;
});
});
Model
Create a Entity Framework and its entity context name is TestEntities.
View Method: 1
Using "ng-options"
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>fillDropDownList</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="ctrlloginSignup">
<select name="ddlRegisterBy" id="Select1" class="styselect" ng-options="item.Name for item in getProfile track by item.ID">
<option value="0">Select Profile For</option>
</select>
</div>
</body>
</html>
View Method: 2
Using "ng-selected"
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>fillDropDownList</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="ctrlloginSignup">
<select name="ddlRegisterBy" id="ddlRegisterBy" class="styselect">
<option value="0">Select Profile For</option>
<option ng-repeat="item in getProfile" value="{{item.ID}}" ng-selected="{{ item.Selected == true }}">{{item.Name}}</option>
</select>
</div>
</body>
</html>
Controller
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using TestAngularJS.Models;
namespace TestAngularJS.Controllers
{
public class TestController : Controller
{
public ActionResult fillDropDownList()
{
return View();
}
[HttpGet]
public ActionResult getProfile()
{
var data = (dynamic)null;
using (TestEntities db = new TestEntities())
{
data = db.sp_getProfile().ToList();
}
return Json(data, JsonRequestBehavior.AllowGet);
}
}
}
0 comments