angular使用select时要注意的坑
一、错误使用产生的坑--留白
公司前段时间要搞一个后台系统,为了快选了angular,在使用select标签的时候碰到一个小问题,首先我们先来看坑图,如图1所示。
如图所示,出现了留白,也就是当我们使用select和ng-repeat循环时候出现了一个留白,如代码所示
<select name="rzstatus" ng-model="rzstatus">
<option ng-repeat=“a in aa” value="a">{{a.name}}</option>
</select>
出现这个问题的原因是指令使用错误,因为在使用select标签的时候应该是在select标签中直接使用ng-options指令而不再是option标签中使用ng-repeat指令了,代码如下所示
<select id="type" ng-model="formData.type" ng-options="item.id as item.name for item in typeData">
</select>
如此写代码,就会出现如图2所示的界面,完美的避开了留白一行。
ng-options新鲜的指令,下面我们来看下他的语法item.id as item.name for item in items。拿这句当案例,从后往前出现了三个关键字分别是in、for和as,in大家很熟悉从一个数组中依次遍历每一项的标识符,而for指代的是html5中option标签中的值,as 标签的意思是option标签中的value所对应的值,若有如下代码:
item.id as item.name for item in items
其实他等价于
<option value="item.id">item.name</option>
如上对应关系我相信大家就秒懂了,在做后台系统的时候如想让当前选项和服务端保持一致,如编辑文章时文章的属性,可见我们只需要对应as前面的item.as属性即可,如果我们要在每种选项前面多加一个“请选择”的选项,这时候只需要单独添加一个option标签行就成,如下代码所示:
<select id="type" ng-model="type" ng-options="item.id as item.name for item in items">
<option value=“-1”>请选择</option>
</select>
angular使用select时要注意的坑的更多相关文章
- 使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(一)——创建应用
使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(一)——创建应用 使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(二)——使用蓝图功能进行模块化 使用 Flask 框架写用 ...
- 如何在PL/SQL Developer 中设置 在select时 显示所有的数据
在执行select 时, 总是不显示所有的记录, 要点一下, 下面那个按钮才会显示所有的数据. 解决方法: Tools>Preferences>Window Types>SQ ...
- 类似智能购票的demo--进入页面后默认焦点在第一个输入框,输入内容、回车、right时焦点自动跳到下一个,当跳到select时,下拉选项自动弹出,并且可以按上下键选择,选择完成后再跳到下一个。
要实现的效果:进入页面后默认焦点在第一个输入框,输入内容.回车.right时焦点自动跳到下一个,当跳到select时,下拉选项自动弹出,并且可以按上下键选择,选择完成后再跳到下一个. PS:自己模拟的 ...
- 使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(五)——实现注册功能
使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(一)——创建应用 使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(二)——使用蓝图功能进行模块化 使用 Flask 框架写用 ...
- 使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(四)——对 run.py 的调整
使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(一)——创建应用 使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(二)——使用蓝图功能进行模块化 使用 Flask 框架写用 ...
- 使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(二)——使用蓝图功能进行模块化
使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(一)——创建应用 使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(二)——使用蓝图功能进行模块化 使用 Flask 框架写用 ...
- 使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(三)——使用Flask-Login库实现登录功能
使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(一)——创建应用 使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(二)——使用蓝图功能进行模块化 使用 Flask 框架写用 ...
- 记一次在node.js中使用crypto的createCipheriv方法进行加密时所遇到的坑
Node.js的crypto模块提供了一组包括对OpenSSL的哈希.HMAC.加密.解密.签名,以及验证等一整套功能的封装.具体的使用方法可以参考这篇文章中的描述:node.js_crypto模块. ...
- 学习Spring5源码时所遇到的坑
学习Spring5源码时所遇到的坑 0)本人下载的源码版本是 spring-framework-5.0.2.RELEASE 配置好gradle环境变量之后,cmd进入到spring项目,执行gradl ...
随机推荐
- vtkQuadric创建二次曲面
在本实例中,我们将用到vtkQuadric.vtkSampleFunction.vtkContourFilter三个类,分别是二次曲面函数.函数曲面抽样和等高滤波. vtkQuadric负责二次曲面基 ...
- JavaScript 智能社 拖拽
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
- 03 Yarn 原理介绍
Yarn 原理介绍 大纲: Hadoop 架构介绍 YARN 产生的背景 YARN 基础架构及原理 Hadoop的1.X架构的介绍 在1.x中的NameNodes只可能有一个,虽然可以通过Se ...
- 第一届山东省ACM——Balloons(java)
Description Both Saya and Kudo like balloons. One day, they heard that in the central park, there wi ...
- ACM之鸡血篇
一匹黑马的诞生 故事还要从南京现场赛讲起,话说这次现场赛,各路ACM英雄豪杰齐聚南京,为争取亚洲总舵南京分舵舵主之职位,都使出了看 家本领,其中有最有实力的有京城两大帮清华帮,北大帮,南郡三大派上交派 ...
- Android Textview实现文字颜色渐变效果
最近做应用的时候遇到一个需求,一行文字的颜色需要一个渐变效果 如上所有 从左到有逐渐变化,自己写了一个demo实现上述效果 package com.huwei.example.test; import ...
- jquery_DOM笔记3
css 操作: css()设置或者返回匹配元素的样式 height() 设置或者返回匹配元素的高度 width() 设置或者返回匹配元素的宽度 offset()设置或者返回匹配元素相对于文档的相对位置 ...
- SQL处理数组,字符串转换为数组
原文转载自:http://hi.baidu.com/gagahjt/item/fd081316450f05028ebde413 一.按指定符号分割字符串,返回分割后的元素个数,方法很简单,就是看字符串 ...
- 7九章算法强化班全解--------Hadoop跃爷Spark
------------------------------------------------------------第七周:Follow up question 1,寻找峰值 寻找峰值 描述 笔记 ...
- mysql主从复制实现数据库同步
mysql主从复制相信已经用得很多了,但是由于工作原因一直没怎么用过.趁着这段时间相对空闲,也就自己实现一遍.尽管互联网上已有大把类似的文章,但是自身实现的仍然值得记录. 环境: 主服务器:cento ...