Creating a drop-down menu with angular js

Question

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.

Yes please. This part <td class="display_bold" ><label for="name">OS Type:</label></td> — user3078335
– user3078335, Commented Jun 15, 2017 at 18:23

Sajeetharan · Accepted Answer · 2017-06-15 18:27:11Z

2

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>

answered Jun 15, 2017 at 18:27

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

3 Comments

user3078335 Over a year ago

Thank you so much!!

Sajeetharan Over a year ago

just change ng-model

user3078335 Over a year ago

i figured it out... that's why i deleted the comment. Thanks again :)

cbrawl · Accepted Answer · 2017-06-15 18:25:19Z

0

A dropdown in Angular.js could look something like this:

<select ng-model="osType">
    <option value=" ">Choose OS</option>
    <option ng-repeat="o in operatingsystems">{{o}}</option>
</select>

answered Jun 15, 2017 at 18:25

cbrawl

1,0051 gold badge13 silver badges28 bronze badges

Collectives™ on Stack Overflow

Creating a drop-down menu with angular js

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related