脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → angularjs 下拉框

AngularJS使用ng-options指令实现下拉框

 更新时间：2016年08月23日 11:37:39   作者：翱翔天地  
这篇文章主要介绍了AngularJS使用ng-options指令实现下拉框效果，ng-option指令使用也很简单，下文具体给大家说明，对angularjs 下拉框知识感兴趣的朋友一起看下吧

ng-option指令使用很简单，只需要绑定两个属性：

一个是ng-model用于获取选定的值；

另一个是ng-options用于确定下拉列表的元素数组。

1、问题背景

一般情况下，select下都会有option，但是AngularJS中有指令ng-options，就可以实现select下拉框

2、实现源码

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>AngularJS之下拉框（方式一）</title> 
<script type="text/javascript" src="../js/angular.min.js" ></script> 
<script> 
var app = angular.module("selApp",[]); 
app.controller("selCon",function($scope){ 
$scope.options = ["第一季度","第二季度","第三季度","第四季度"]; 
}); 
</script> 
</head> 
<body> 
<div ng-app="selApp" ng-controller="selCon"> 
<select ng-model="selectedName" ng-options="x for x in options" style="width: 180px;"> 
</select> 
</div> 
</body> 
</html>

3、问题说明

<select>
<option></option>
</select>

利用指令ng-options，可以省略<option></option>

以上所述是小编给大家介绍的AngularJS使用ng-options指令实现下拉框，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • AngularJS中的Directive自定义一个表格

    AngularJS中的Directive自定义一个表格

    本篇文章给大家介绍在angularjs中自定义一个有关表格的directive，涉及到angularjs directive相关知识，对本文感兴趣的朋友一起学习吧
    2016-01-01
  • 浅谈Angular的12个经典问题

    浅谈Angular的12个经典问题

    Angular作为目前最为流行的前端框架，受到了前端开发者的普遍欢迎。不论是初学Angular的新手，还是有一定Angular开发经验的开发者，了解本文中的12个经典面试问题，都将会是一个深入了解和学习Angular2的知识概念的绝佳途径。
    2021-05-05
  • 关于 angularJS的一些用法

    关于 angularJS的一些用法

    这篇文章主要介绍了关于 angularJS的一些用法的相关资料,需要的朋友可以参考下
    2017-11-11
  • Angularjs 自定义服务的三种方式(推荐)

    Angularjs 自定义服务的三种方式(推荐)

    angularjs 中可通过三种（$provider,$factory,$service）方式自定义服务。这篇文章主要介绍了Angularjs 自定义服务的三种方式,非常不错，需要的朋友可以参考下
    2016-08-08
  • AngularJS+Bootstrap3多级导航菜单的实现代码

    AngularJS+Bootstrap3多级导航菜单的实现代码

    将介绍如何用AngularJS构建一个强大的web前端系统。文章介绍如何实现多限级导航菜单。本文图文并茂给大家介绍的非常详细，感兴趣的朋友参考下吧
    2017-08-08
  • Angular 2父子组件之间共享服务通信的实现

    Angular 2父子组件之间共享服务通信的实现

    这篇文章主要给大家介绍了关于Angular 2父子组件之间共享服务通信的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
    2017-07-07
  • angularJS中router的使用指南

    angularJS中router的使用指南

    这篇文章主要介绍了angularJS中router的使用方法和示例分享,需要的朋友可以参考下
    2015-02-02
  • Angular2中如何使用ngx-translate进行国际化

    Angular2中如何使用ngx-translate进行国际化

    本篇文章主要介绍了Angular2中使用ngx-translate进行国际化，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05
  • Angular应用里环境变量SERVER_REQUEST_ORIGIN含义解析

    Angular应用里环境变量SERVER_REQUEST_ORIGIN含义解析

    这篇文章主要为大家介绍了Angular应用里环境变量SERVER_REQUEST_ORIGIN的含义解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-10-10
  • 详解AngularJS的通信机制

    详解AngularJS的通信机制

    这篇文章主要介绍了AngularJS的通信机制,AngularJS是非常具有人气的JavaScript库,需要的朋友可以参考下
    2015-06-06

最新评论