Populate dropdown with json data using angularJs

January 03 2021 by Admin

In this article, we have described how to populate dropdown with JSON data using angularJs with an example and a sample code.

In this article, we have described how to populate dropdown with JSON data using AngularJs with an example and a sample code. AngularJS is a progressive framework for building user interfaces that are used for two-way binds.

Step -1

Open Visual Studio. Click on the file in the menu and select new Project .

Populate dropdown with json data using angularJs

Step -2

Select new project type.

Index.cshtml

We have provided html code below.

<html>

<head>

<title>how to Populate dropdown with JSON data using AngularJs</title>

var app = angular.module('WebApp', [])

app.controller('Home', function ($scope, $http, $window) {

var post = $http({

method: "POST",

url: "/Home/StockList",

dataType: 'json',

data: {},

headers: { "Content-Type": "application/json" }

});

post.success(function (data, status) {

$scope.StockList = data;

});

post.error(function (data, status) {

$window.alert(data.Message);

});

</script>

</head>

<body>

</option>

</select>

</div>

</body>

</html>

Model

public class Stockmodel

{

public Int32 stockId { get; set; }

public string StockName { get; set; }

}

StockController

public JsonResult StockList()

{

List<Stockmodel> stocks = new List<Stockmodel>();

stocks.Add(new Stockmodel

{

stockId = 1,

StockName = "REL",

});

stocks.Add(new Stockmodel

{

stockId = 2,

StockName = "Infosys",

});

stocks.Add(new Stockmodel

{

stockId = 3,

StockName = "TCS",

});

stocks.Add(new Stockmodel

{

stockId = 4,

StockName = "Bajaj Finance",

});

return Json(stocks);

}

Dropdown
Angular

Home > Angular > Populate dropdown with json data using angularJs