AngularJS 中的 Ng-Options
本教程将讨论 ng-options 以及我们如何使用它在使用 AngularJS 的选择中显示选项。
在 AngularJS 中使用 ng-options
ng-options 用于构建带有选项的 HTML 元素并将其绑定到模型属性。我们使用 ng-options 在选择列表中指定选项。
ng-options 专门设计用于填充下拉列表的项目。我们将通过一个示例来创建一个下拉列表，该下拉列表将使用 ng-options 来填充选项。
首先，我们使用 script 标签添加 AngularJS 库和 app.js 文件。
# AngularJS
<head>
<script src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
<script src="app.js"></script>
</head>
使用 ng-app 定义 AngularJS 应用程序，使用 ng-controller 定义控制器。
# AngularJS
<body ng-app="myApp">
<div ng-controller="myController"></div>
</body>
现在，在 app.js 中，我们将创建我们的模块。
# AngularJS
var app = angular.module('myApp', []);
我们将创建一个控制器，该控制器将定义一个数组 selectedItem，并将分配的值添加到 app.js 中的选项数组。
# AngularJS
app.controller('myController', function($scope) {
$scope.lists = [];
$scope.selectedItem = { name: 'second', id: 5 };
$scope.lists = [{name: 'first', id: 3 },{ name: 'second', id: 5 },{ name: 'third', id: 7 }];
});
最后，我们将为我们的应用程序创建一个前端。
# AngularJS
<p>selected item is : {{selectedItem}}</p>
<p> name of selected item is : {{selectedItem.name}} </p>
<select ng-model="selectedItem" ng-options="list.name for list in lists track by list.id"></select>
输出：
在上面使用 ng-options 的示例中，很容易在 select 中显示选项列表。当用户选择一个项目时，我们不需要编写任何额外的代码行来选择一个项目。
相关文章
在 Angular 中上传文件
发布时间：2023/04/14 浏览次数：71 分类：Angular
-
本教程演示了如何在 Angular 中上传任何文件。我们还将介绍如何在文件上传时显示进度条，并在上传完成时显示文件上传完成消息。
Angular 中所有 Mat 图标的列表
发布时间：2023/04/14 浏览次数：91 分类：Angular
-
本教程演示了在哪里可以找到 Angular 中所有 Mat 图标的列表以及如何使用它们。
Angular 2 中的复选框双向数据绑定
发布时间：2023/04/14 浏览次数：139 分类：Angular
-
本教程演示了如何一键标记两个复选框。这篇有 Angular 的文章将着眼于执行复选框双向数据绑定的不同方法。
在 AngularJS 中重新加载页面
发布时间：2023/04/14 浏览次数：142 分类：Angular
-
我们可以借助 windows.location.reload 和 reload 方法在 AngularJS 中重新加载页面。
在 AngularJs 中设置 Select From Typescript 的默认选项值
发布时间：2023/04/14 浏览次数：78 分类：Angular
-
本教程提供了在 AngularJs 中从 TypeScript 中设置 HTML 标记选择的默认选项的解释性解决方案。
在 AngularJS 中启用 HTML5 模式
发布时间：2023/04/14 浏览次数：150 分类：Angular
-
本文讨论如何在 AngularJS 应用程序上启用带有深度链接的 HTML5 模式。
在 AngularJs 中加载 spinner
发布时间：2023/04/14 浏览次数：107 分类：Angular
-
我们将介绍如何在请求加载时添加加载 spinner，并在 AngularJs 中加载数据时停止加载器。
在 Angular 中显示和隐藏
发布时间：2023/04/14 浏览次数：78 分类：Angular
-
本教程演示了 Angular 中的显示和隐藏。在开发商业应用程序时，我们需要根据用户角色或条件隐藏一些数据。我们必须根据该应用程序中的条件显示相同的数据。
在 Angular 中下载文件
发布时间：2023/04/14 浏览次数：104 分类：Angular
-
本教程演示了如何在 angular 中下载文件。我们将介绍如何通过单击按钮在 Angular 中下载文件并显示一个示例。
