Hi telldurges,
Check this example. Now please take its reference and correct your code.
Here i have used simple MVC Controller to fetch the record from Database. You need to use Web API.
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
return View();
}
[HttpGet]
public ActionResult GetMonths()
{
// Get the Month lists from Database.
List<SelectListItem> months = new List<SelectListItem>();
months.Add(new SelectListItem { Value = "1", Text = "JAN" });
months.Add(new SelectListItem { Value = "2", Text = "FEB" });
months.Add(new SelectListItem { Value = "3", Text = "MAR" });
months.Add(new SelectListItem { Value = "4", Text = "APR" });
months.Add(new SelectListItem { Value = "5", Text = "MAY" });
months.Add(new SelectListItem { Value = "6", Text = "JUN" });
months.Add(new SelectListItem { Value = "7", Text = "JUL" });
months.Add(new SelectListItem { Value = "8", Text = "AUG" });
months.Add(new SelectListItem { Value = "9", Text = "SEP" });
months.Add(new SelectListItem { Value = "10", Text = "OCT" });
months.Add(new SelectListItem { Value = "11", Text = "NOV" });
months.Add(new SelectListItem { Value = "12", Text = "DEC" });
return Json(months, JsonRequestBehavior.AllowGet);
}
}
View
<html>
<head>
<title>Index</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.directive('multiselectDropdown', function () {
return {
restrict: 'E',
scope: {
model: '=',
options: '='
},
template:
"<div class='btn-group' data-ng-class='{open: open}' style='width: 200px;'>" +
"<button type='button' class='btn btn-small' style='width: 160px;height: 30px;'>---Select---</button>" +
"<button type='button' class='btn btn-small dropdown-toggle' data-ng-click='openDropdown()' style='width: 40px;height: 30px;' ><span class='caret'></span></button>" +
"<ul class='dropdown-menu' aria-labelledby='dropdownMenu' style='position: absolute;'>" +
"<li style='cursor:pointer;' data-ng-repeat='option in options'><a data-ng-click='toggleSelectItem(option)'><span data-ng-class='getClassName(option)' aria-hidden='true'></span> {{option.name}}</a></li>" +
"</ul></div>",
controller: function ($scope) {
$scope.openDropdown = function () {
$scope.open = !$scope.open;
};
$scope.selectAll = function () {
$scope.model = [];
angular.forEach($scope.options, function (item, index) {
$scope.model.push(item);
});
};
$scope.deselectAll = function () {
$scope.model = [];
};
$scope.toggleSelectItem = function (option) {
var intIndex = -1;
angular.forEach($scope.model, function (item, index) {
if (item.id == option.id) {
intIndex = index;
}
});
if (intIndex >= 0) {
$scope.model.splice(intIndex, 1);
} else {
$scope.model.push(option);
}
};
$scope.getClassName = function (option) {
var varClassName = 'glyphicon glyphicon-unchecked';
angular.forEach($scope.model, function (item, index) {
if (item.id == option.id) {
varClassName = 'glyphicon glyphicon-check';
}
});
return (varClassName);
};
}
}
});
app.controller('MyController', ['$scope', '$http', '$window', function ($scope, $http, $window) {
$scope.SelectedMonths = [];
$http({
method: 'Get',
url: '/Home/GetMonths/'
}).success(function (data, status, headers, config) {
$scope.Months = [];
angular.forEach(data, function (item, index) {
$scope.Months.push({ id: item.Value, name: item.Text });
});
//$scope.Months = data;
}).error(function (data, status, headers, config) {
$scope.message = 'Unexpected Error';
});
$scope.Save = function () {
var months = "Selected Months are : \n\r";
angular.forEach($scope.SelectedMonths, function (item, index) {
months += "Id : " + item.id + "\tName : " + item.name + "\n\r";
});
$window.alert(months);
}
} ]);
</script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
<multiselect-dropdown id="ddlMonths" model="SelectedMonths" options="Months"></multiselect-dropdown>
<input type="button" value="Save" ng-click="Save()" />
</body>
</html>
Screenshot
