How to Bind drop down values using Angular

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

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];
}
}
}
}

5 Replies

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

Rajanikant Hawaldar7y ago
Accepted 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
+1
Chittaranjan Swain7y ago
fixed.
0
Rajanikant Hawaldar7y ago
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];
          }
        }
    }
}
0
Chittaranjan Swain7y ago
want Angular 2 or above .
0
Piyush Pansuriya7y ago
Hi, try this:
"registrationForm" (ngSubmit)="onSubmit()">
   class="custom-select">
      "" disabled>Choose your city






   "submit">Submit
+1