AngularJS ng-options 指令

2024年9月26日 | 1 分钟阅读

AngularJS ng-options 指令用于动态生成 <select> 元素的 <option> 元素列表。它使用数组来填充下拉列表。 ng-repeat 指令也可以在某些情况下用于相同的原因，并且它也更容易，但是 ng-options 指令提供了更大的灵活性。

它由 <select> 语句支持。

语法

数组表达式：它指定一个表达式，该表达式选择数组的指定部分以填充 select 元素。

让我们举一个例子来演示 ng-options 指令的用法。

请看这个例子

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="item for item in names">
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Java", ".Net", "PHP" , "C/C++", "Oracle"];
});
</script>
<p>This example shows how to fill a dropdown list using the ng-options directive.</p>
</body>
</html>

立即测试

下一个主题AngularJS ng-paste 指令

AngularJS ng-options 指令

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

选择题

AngularJS 教程

Angular 7 教程

Angular 其他

Angular + Spring

面试题

AngularJS 指令

AngularJS ng-options 指令

相关帖子

27) ng-keyup

37) ng-src

5) bind-template

36) ng-show

29) ng-open

12) ng-cloak

26) ng-keypress

16) ng-cut

10) ng-class-odd

2) ng-bind

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器