How to Populate the dropdown in angularjs

Question

I want to create one dropdown with some Data. Here is my snippet

<!DOCTYPE html>
    <html>
    <head>
        <script src="Scripts/angular.min.js"></script>
        <title></title>
    </head>
    <body>
        <div data-ng-app="myApp"></div>
        <div data-ng-controller="programController"></div>
             Program:
        <select name="" id="program" data-ng-options="program for program in programs">
            <option value="">SelectProgram</option>
        </select>
            <script>
                var myApp = angular.module("myApp", []);
                myApp.controller("programController", function ($scope) {
                    $scope.programs = ['.NET', 'Java', 'Angular JS,'PHP','C++'];
                });
                 </script>
    </body>
    </html>

But I get an empty dropdown. Is there any mistake in my snippet?

you forget the single quote in array $scope.programs = ['.NET', 'Java', 'Angular JS','PHP','C++']; — Vipin Jain
– Vipin Jain, Commented Jan 27, 2016 at 6:58

Prashant Patil · Accepted Answer · 2016-01-27 07:47:51Z

1

This is the tested code and working for me.You wrote controller out side data-ng-app="myApp". And please insert single quotation in line '.NET', 'Java', 'Angular JS','PHP','C++' after third item

<div data-ng-app="myApp" data-ng-controller="programController">
        Program:
    <select data-ng-model="selectedItem" data-ng-options="program for program in programs">
        <option value="">SelectProgram</option>
    </select>
</div>

<script>
var app = angular.module('myApp', []);

app.controller('programController', function ($scope) {
   $scope.programs = [
       '.NET', 'Java', 'Angular JS','PHP','C++'
    ];
});
</script>

Hope this will work for too.

answered Jan 27, 2016 at 7:47

Prashant Patil

3712 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Prashant Patil Over a year ago

@i Dont Know have you try it ?

pecey · Accepted Answer · 2016-01-27 07:04:14Z

0

ng-options requires a ng-model too.

Check out the documentation : https://docs.angularjs.org/api/ng/directive/ngOptions#!

And I am assuming that the list is typed in correctly

answered Jan 27, 2016 at 7:04

pecey

6915 silver badges14 bronze badges

Comments

Vipin Jain · Accepted Answer · 2016-01-27 07:32:08Z

0

you forget single quote in array
$scope.programs = ['.NET', 'Java', 'Angular JS','PHP','C++'];

ng-model is not write in your code.
Try This

    <div data-ng-app="myApp">
    <div data-ng-controller="programController">
         Program:
    <select name="" id="program" data-ng-options="program for program in programs" ng-model="programName" >
        <option value="">SelectProgram</option>
    </select>
</div>

<script>
var myApp = angular.module("myApp", []);
myApp.controller("programController", function ($scope) {
$scope.programs = ['.NET', 'Java', 'Angular JS','PHP','C++'];
            });
</script>

For more info https://docs.angularjs.org/api/ng/directive/ngOptions

Plunker link your code

edited Jan 27, 2016 at 7:32

answered Jan 27, 2016 at 7:01

Vipin Jain

3,77618 silver badges36 bronze badges

4 Comments

i Dont Know Over a year ago

hi Vipin Jain..Thanks for ur Response..i tried ur code..but this one also not worked

Vipin Jain Over a year ago

can you see link provided above

i Dont Know Over a year ago

yes...i use only <script src="Scripts/angular.min.js"></script> ..is there any Scruipt file are required?

Vipin Jain Over a year ago

i have edited my answer with plunker code you can use this

Collectives™ on Stack Overflow

How to Populate the dropdown in angularjs

3 Answers 3

1 Comment

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related