使用 angular js 创建下拉菜单

Question

我想为用户 select 获取各种操作系统的下拉列表。到目前为止，这是我的代码

<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>

这是我要从中创建下拉菜单的 OS 列表。

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

我该怎么做？我知道我可能已将输入类型从文本更改为其他类型但不确定是什么。

Answer 1

Angular.js 中的下拉菜单可能如下所示：

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

Answer 2

只要你能做到，

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

演示

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>

使用 angular js 创建下拉菜单

Creating a drop-down menu with angular js

angularjs

angularjs-directive

angularjs-scope