CODEWITHSUNDEEP
angularjs
i Dont Know
i Dont Know

Reputation: 75

How to Populate the dropdown in angularjs

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?

Upvotes: 0

Views: 523

Answers (3)

Prashant Patil
Prashant Patil

Reputation: 371

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.

Upvotes: 1

Vipin Jain
Vipin Jain

Reputation: 3756

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

Upvotes: 0

pecey
pecey

Reputation: 681

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

Upvotes: 0

Related Questions