drop-down in angularjs

how can I bind drop-down using angularjs

Hi Harish. try the below code

>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="x for x in names">
select>
div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Emil", "Tobias", "Linus"];
});
script>
body>
html>

Hi Harish,

Refer below links for More Info.,

https://www.c-sharpcorner.com/blogs/create-dropdownlist-in-angularjs1

https://www.codementor.io/chrisharrington/angularjs-tutorial-series-part-5-creating-a-dropdown-control-for-your-site-8fys2du2r

https://docs.angularjs.org/api/ng/directive/ngOptions

https://docs.angularjs.org/api/ng/directive/select

https://www.tutlane.com/tutorial/angularjs/angularjs-select-box-dropdown-list-binding-with-validations-example

Now, open HomeController. By default, HomeController will be inheritted by Controller as HomeController:Controller. Change it to HomeController:ApiController and copy the code, given below.

using AngularwithWebAPI.DbContext;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http; //This namespace is responsible for IHttpActionResult
using System.Web.Mvc;
namespace AngularwithWebAPI.Controllers
{
publicclassHomeController: ApiController {
DbContext.StudentEntities studentEntities = new DbContext.StudentEntities();
publicIHttpActionResult GetStates() {
var states = studentEntities.StateMasters.ToList();
return Ok(states);
}
}

Now run your Service

Script.js

var testApp = angular.module("testModule", []).controller("testController", function($scope, $http) {
$http.get('http://localhost:50623/api/home/getstates').then(function(response) {
$scope.states = response.data;
});
});

index.html

"testModule">
"Scripts/angular.min.js">
"Scripts/js/Script.js">
"utf-8" />
"testController">
"1">
Name
"text" id="txtName" ng-model="name" />
State
City
"text" id="txtCity" />
Address
"text" id="txtAddress" />
Phone
"text" id="txtPhone" />
"button" id="bttnUpdate" value="Update" />

Hi Harish,

Try this Example-

<br />AngularJs Select Box or Dropdown List example<br />

AngularJS Select Box or Dropdown List Example

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

Bidyasagar Mishra7y ago
Accepted answer
Hi Harish. try the below code
>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="selectedName" ng-options="x for x in names">
select>

div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
});
script>
body>
html>
+2
Chittaranjan Swain7y ago
Hi Harish,

Refer below links for More Info.,

https://www.c-sharpcorner.com/blogs/create-dropdownlist-in-angularjs1
https://www.codementor.io/chrisharrington/angularjs-tutorial-series-part-5-creating-a-dropdown-control-for-your-site-8fys2du2r
https://docs.angularjs.org/api/ng/directive/ngOptions
https://docs.angularjs.org/api/ng/directive/select
https://www.tutlane.com/tutorial/angularjs/angularjs-select-box-dropdown-list-binding-with-validations-example
+1
Chandrasekaran C7y ago
Now, open HomeController. By default, HomeController will be inheritted by Controller as HomeController:Controller. Change it to HomeController:ApiController and copy the code, given below.
using AngularwithWebAPI.DbContext;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Http; //This namespace is responsible for IHttpActionResult

using System.Web.Mvc;

namespace AngularwithWebAPI.Controllers

{

publicclassHomeController: ApiController {

DbContext.StudentEntities studentEntities = new DbContext.StudentEntities();

publicIHttpActionResult GetStates() {

var states = studentEntities.StateMasters.ToList();

return Ok(states);

}

}
Now run your Service

Script.js
var testApp = angular.module("testModule", []).controller("testController", function($scope, $http) {

$http.get('http://localhost:50623/api/home/getstates').then(function(response) {

$scope.states = response.data;

});

});
index.html
"testModule">



"Scripts/angular.min.js">



"Scripts/js/Script.js">





"utf-8" />



"testController">

"1">



Name



"text" id="txtName" ng-model="name" />





State







City



"text" id="txtCity" />





Address



"text" id="txtAddress" />





Phone



"text" id="txtPhone" />







"button" id="bttnUpdate" value="Update" />