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?

Answers


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.


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


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


Need Your Help

Sending/printing a key with jQuery.Trigger

jquery triggers

i think i have read every page google knows about which has these keywords, and nothing works for me.

JavaScript img onload - progressive jpg/jpeg

javascript jpeg onload progressive

Is there a way to detect loading of each step of progressive JPEG (or at least the first one)?