drop-down in angularjs

Question

how can I bind drop-down using angularjs

Bidyasagar Mishra · 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 >

Chittaranjan Swain · Answer

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

Chandrasekaran C · Answer

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 "stateId" data-ng-repeat= "st in states" value= "{{st.StateId}}" >{{st.StateName}} City "text" id= "txtCity" /> Address "text" id= "txtAddress" /> Phone "text" id= "txtPhone" /> "button" id= "bttnUpdate" value= "Update" /> In the code, used above, I used data-ng-repeat, which will convert option tag row by the row of StateName. Now, one question arises, why do I use data-ng-repeat="st in states" because, I will return the data into my scope model which is $scope.states. "stateId" data-ng-repeat= "st in states" value= "{{st.StateId}}" >{{st.StateName}}

Chittaranjan Swain · Answer

Hi Harish, Try this Example- AngularJs Select Box or Dropdown List example AngularJS Select Box or Dropdown List Example --Select-- chitta Mitu Fish

drop-down in angularjs

Insert Link

Embed YouTube Video

Table Options

Insert Image

Answers (4)