How to Bind drop down values using Angular

Question

Hi All, How to Bind dropdown list values using Angular.

Rajanikant Hawaldar · Answer

Hi Chittaranjan, Here is code, Let me know if not fixed or not We add here a angularjs script file like it is downloaded. "script/angular.min.js" > Or we can use direct online script like: "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js" > After that I create module here, var app = angular.module( 'MyFirstApp' , []) Here MyFirstApp is a module name, I register my controller with module like: app.controller( 'FruiteNameBindcontrol' , function ($scope) { $scope.Color = [ { id: '1' , name: 'Apple' }, { id: '2' , name: 'Guava' }, { id: '3' , name: 'Papaya' }, { id: '4' , name: 'Orange' }, { id: '5' , name: 'Strawberry' }, { id: '6' , name: 'Watermelon' }]; }); Then finally script is generated like: "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js" > --%> "script/angular.min.js" > "text/javascript" > var app = angular.module( 'MyFirstApp' , []) app.controller( 'FruiteNameBindcontrol' , function ($scope) { $scope.Color = [ { id: '1' , name: 'Apple' }, { id: '2' , name: 'Guava' }, { id: '3' , name: 'Papaya' }, { id: '4' , name: 'Orange' }, { id: '5' , name: 'Strawberry' }, { id: '6' , name: 'Watermelon' }]; }); After that I have declare controller in body tag like: body data-ng-app = "MyFirstApp" data-ng-controller = "ColorNamecontrol" > Now one more point here, I can also define data-ng-app = "MyFirstApp" within html tag. After that I have bind color name in dropdownlist like. option data-ng-repeat = "t in Color" value = "{{t.id}}" > {{t.name}} Here I have used data-ng-repeat for iterating values for bind in dropdownlist. All body code is given below. body data-ng-controller = "ColorNameBindcontrol" > form id = "Form" > Select Color: select > option data-ng-repeat = "t in Color" value = "{{t.id}}" > {{t.name}} option > select > form > body > Let me know if not fixed or not https://www.c-sharpcorner.com/blogs/bind-dropdownlist-using-angularjs Thanks

Piyush Pansuriya · Answer

Hi, try this: "registrationForm" (ngSubmit)= "onSubmit()" > class = "custom-select" > "" disabled>Choose your city New York Los Angeles Chicago Las Vegas "submit" >Submit

Chittaranjan Swain · Answer

fixed.

Rajanikant Hawaldar · Answer

Hi try this, let me know issue is fixed or not @Component({ selector: 'my-dropdown' , template: ` "onSelect($event.target.value)" > "#product of products" [value]= "product.id" >{{product.name}} selection={{selectedProduct.name}} `, directives: [CORE_DIRECTIVES, FORM_DIRECTIVES] }) class Product { id: number; name: string; } class DropDownComponent { public products: Product[] = [ { "id" : 1, "name" : "Table" }, { "id" : 2, "name" : "Chair" }, { "id" : 3, "name" : "Light" } ]; public selectedProduct: Product = this .products[0]; onSelect(productId) { this .selectedProduct = null ; for (var i = 0; i this .products.length; i++) { if ( this .products[i].id == productId) { this .selectedProduct = this .products[i]; } } } }

Chittaranjan Swain · Answer

want Angular 2 or above .