Angular是一个前端开发框架。
它是由科技巨头Google开发和维护的。
它提供了一种模块化的方式来开发单页Web应用程序，例如Gmail，PayPal和Lego。
使用Angular构建的应用程序实现了Model-View-View-Model方法。

什么是下拉框？

下拉框是显示选项数组的一种干净方法，因为在用户激活下拉框之前，最初仅显示一个选项。
要将下拉框添加到网页，可以使用select元素或者列表项。
select元素中的第一个<option>标签需要将selected选项设置为selected值。
这是一个小代码段，向我们展示我的意思。

<select name="demo" id="#">
<option selected="selected" value="one">Option 1</option>
<option value="two">Option 2</option>
<option value="three">Option 3</option>
</select>

当然，以上代码需要其特定JavaScript才能具有预期的行为，但是下拉菜单的基本框架保持不变。
让我们看看我们现在如何在Angular中做到这一点。

使用Angular的下拉框

坦白地说，要演示实现有Angular的下拉框的所有可能方法将是相当艰巨的。
每个开发人员的大脑都以自己独特的方式处理逻辑，我在自己的职业生涯中看到了一些疯狂的下拉菜单。
我要谦虚，向大家展示一个相当基本的下拉菜单方法。

方法1：使用ng-options制作下拉列表

我们可以使用ng-options指令从数组或者项目列表中创建下拉菜单。

<div ng-app="demo" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="x for x in names">
</select>
</div>
<script>
var app = angular.module('demo', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Demavand", "Pradeep", "Ashutosh"];
});
</script>

方法2：使用ng-repeat制作下拉列表

Angular是一个通用框架，显然有多种创建基本下拉菜单的方法。
ng-repeat指令为数组中的每个项目重复一段HTML代码，可用于在下拉列表中创建选项，但是ng-options指令专门用于用选项填充下拉列表，它具有一个例如，优点是：用ng-options制成的下拉菜单允许所选值成为对象，而用ng-repeat制成的下拉菜单必须是字符串。

这个特定的代码片段使用ng-repeat实现了相同的列表

<div ng-app="demo" ng-controller="myCtrl">
<select>
<option ng-repeat="name in names">{{name}}</option>
</select>
</div>
<script>
var app = angular.module('demo', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Demavand", "Pradeep", "Ashutosh"];
});
</script>