AngularJS系列之select下拉选择第一个选项为空白的解决办法

今天给大家介绍一下AngularJS系列之select下拉选择第一个选项为空白的解决办法。 相信大家也经常遇到这种情况吧:在使用AngularJS中的select组件开发的时候,莫名其妙的第一个选项就变成空白了,而且选中其中非空白的地方,第一个选项的空白位置又奇妙的消失了。 今天就举几个例子给大家介绍一下种种情况的处理办法,下面首先给出一个具体例子介绍一下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>选择网站:</p>
<select ng-model="selectedSite">
	<option  value="">请选择</option><!-- 这里是重点,必须将value值设置成空字符串,否则第一个选项还是会留空白出来-->
	<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>
</select>
<h1>你选择的是: {{selectedSite}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
   $scope.sites = [
	    {site : "Google", url : "http://www.google.com"},
	    {site : "Runoob", url : "http://www.runoob.com"},
	    {site : "Taobao", url : "http://www.taobao.com"}
	];
});
</script>
<p>该实例演示了使用 ng-repeat 指令来创建下拉列表,选中的值是一个字符串。</p>
</body>
</html>

第一种办法就是在select的下面加上一个默认option,不过有一点必须特别注意,就是在option中的value值必须设置为“”(也就是空字符串),否则上面第一个选项还是会留空白出来。

这样可能就会有人说我第一个option要是不想获取的value值为空,那该怎么办,比如我第一个value值想设置成“请选择”这个字符串呢?

这种情况也好解决,下面看一下下面这个例子,大家就会明白要怎么做了。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>选择网站:</p>
<select ng-model="selectedSite">
	<option  value="请选择">请选择</option><!--注意这个地方要和下面的设置的值要一致 -->
	<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>
</select>
<h1>你选择的是: {{selectedSite}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
   $scope.sites = [
	    {site : "Google", url : "http://www.google.com"},
	    {site : "Runoob", url : "http://www.runoob.com"},
	    {site : "Taobao", url : "http://www.taobao.com"}
	];
	$scope.selectedSite="请选择";<!-- 注意这个设置值,要和上面的value值相一致才可以-->
});
</script>
<p>该实例演示了使用 ng-repeat 指令来创建下拉列表,选中的值是一个字符串。</p>
</body>
</html>

从例子中就可以看出,其实就是在value中添加自己想要的值信息,然后再控制器中进行传初始值。

但是这个时候大家可能会又有一个问题,就是我如果想第一个不想要默认值呢,我就想把数据的任意一个值放在第一个选项里面呢,而且还不能留空白在上面。

这种情况其实也好解决,下面就再看一个例子:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>选择网站:</p>
<select ng-model="selectedSite">
	<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>
</select>
<h1>你选择的是: {{selectedSite}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
   $scope.sites = [
	    {site : "Google", url : "http://www.google.com"},
	    {site : "Runoob", url : "http://www.runoob.com"},
	    {site : "Taobao", url : "http://www.taobao.com"}
	];
	$scope.selectedSite=$scope.sites[0].url;<!-- 这里只要把想要第一次出来的url放在这里就可以实现option默认出现的效果了-->
});
</script>
<p>该实例演示了使用 ng-repeat 指令来创建下拉列表,选中的值是一个字符串。</p>
</body>
</html>

从上面的例子可以很明显的看出,只要在控制器中添加相应的初始值,就可以实现select中默认选中的效果了。

这样基本就全部解决了select中第一个选项留空白的问题了。

如对内容有问题或有疑义,请及时提出,不甚感谢。本人QQ:208017534

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏PPV课数据科学社区

基于 Python 的 Scrapy 爬虫入门:代码详解

一、内容分析 接下来创建一个爬虫项目,以 图虫网 为例抓取里面的图片。在顶部菜单“发现” “标签”里面是对各种图片的分类,点击一个标签,比如“美女”,网页的链接...

3919
来自专栏西安-晁州

vue.js应用开发笔记

看vue.js有几天了,之前也零零散散的瞅过,不过一直没有动手去写过demo,这几天后台事比较少,一直在讨论各种需求(其实公司对需求还是比较重视与严谨的,一个项...

3111
来自专栏CRPER折腾记

Angular 2 + 折腾记 :(7) 初步了解表单:模板驱动及数据驱动及脱坑要点

表单在整个系统中的作用相当重要,这里主要扯下响应表单的实现方式。 首先需要操作表单的模块引入这两个模块; import { FormsModule, React...

612
来自专栏Thinks

【译】W3C WAI-ARIA最佳实践 -- 控件

手风琴是个垂直罗列的元素组合,例如标签或缩略图,这允许用户切换内容模块的展示。每个标签元素可以被用来展开折叠、暴露隐藏其相关内容。手风琴一般被用来减少页面滚动,...

2593
来自专栏Java技术分享

第三章:Shiro的配置——深入浅出学Shiro细粒度权限开发框架

Shiro 被设计成能够在任何环境下工作,从最简单的命令行应用程序到最大的的企业群集应用。由于环境的多样性,使得许多配置机制适用于它的配置。

2398
来自专栏前端说吧

vue - 使用vue实现自定义多选与单选的答题功能

1192
来自专栏LeoXu的博客

Tapestry 教程(六)使用BeanEditForm来创建用户表单

在前面一章,我们看到了Tapestry如何处理简单地链接,甚至于处理能在URL中传递信息的链接。在本章,我们将会看到Tapestry如何以不同的方式做同样的事情...

822
来自专栏代码GG之家

Scoops android app多主题架构(二)

简要说明 通过注释方式,完成多主题的效果更换。可以减少一些代码,使得代码更清晰一些。 ? 使用说明 1 首先写一个注释类 ? 2 在MainApp 初始化的时候...

1868
来自专栏java架构师

解决ASP.NET中的各种乱码问题

经常发现有人被乱码困扰着,而我感觉比较幸运,很少为此烦恼过。 在这篇博客中,我将把我想到的一些与乱码有关的经验总结出来,供大家参考。 页面显示乱码问题 在一...

3016
来自专栏熊二哥

Python快速入门

最近在很多地方都可以看到Python的身影,尤其在人工智能等科学领域,其丰富的科学计算等方面类库无比强大。很多身边的哥们也提到Python非常的简洁方便,比如用...

17810

扫码关注云+社区