Search code examples
angularjsangularjs-directiveangularjs-scope

Creating a drop-down menu with angular js

I want to get a drop down lsit of various operating systems for the user to select. This is my code so far

<form id="main">
    <table>
        <tr>
            <td class="display_bold"><label for="name">VM Name:</label></td>
        </tr>
        <tr>
            <td class="display"><input type="text" ng-model="virMachine.vmName" size="40"></td>
        </tr>
        <tr>
            <td class="display_bold" ><label  for="name">OS Type:</label></td>
        </tr>
        <tr>
            <td class="display"><input type="text" ng-model="virMachine.osVersion" size="40"></td>
        </tr>
    </table>

This is the OS list i want to create a drop-down menu out of.

$scope.operatingsystems = ["Ubuntu-16", "Centos 7", "Wimdows"];

How do I do it? I know I might have change the input type from text to something else but not sure what.

Solution

  • Just you can do this,

    <select ng-model="osType">
   <option ng-repeat="os in operatingsystems">{{os }}</option>
</select>

    DEMO 

    angular.module('myApp',[]).controller('studentController', function($scope){
$scope.operatingsystems = ["Ubuntu-16", "Centos 7", "Wimdows"]; 
 });
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>

<body>
    <div ng-app="myApp" ng-controller="studentController">
        <table>
            <tr>
                <td class="display_bold"><label for="name">VM Name:</label></td>
            </tr>
            <tr>
                <td class="display"><input type="text" ng-model="virMachine.vmName" size="40"></td>
            </tr>
            <tr>
                <td class="display_bold"><label for="name">OS Type:</label></td>
            </tr>
            <tr>
                <td class="display"><select ng-model="osType">
                        <option ng-repeat="os in operatingsystems">{{os }}</option>
</select></td>
            </tr>
        </table>
    </div>
</body>