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 ...
随机推荐
- temp
netstat -tlnap lsof -i :40735 ps -ef|grep 10259 iftop iptraf nethogs gidxylxhqp http://blog.csdn.net ...
- 2014年---移动端webapp个人年度总结
我今年是由零基础开始入门的,刚好我第一家公司入职后就马上让我接手做ipad版的专题app了.(一入门就是移动端开发,是幸运也是艰辛的开始). 我是自学前端的,当然,对Bootstrap,JQuery ...
- [从产品角度学EXCEL 02]-EXCEL里的树形结构
这是<从产品角度学EXCEL>系列第三篇. 前言请看: 0 为什么要关注EXCEL的本质 1 excel是怎样运作的 或者你可以去微信公众号@尾巴说数 获得连载目录. 本文仅由尾巴本人发布 ...
- 防御CSRF的方法有哪些(一) HTTP 头中自定义属性并验证 CSRF跨站域请求伪造攻击
CSRF (Cross Site Request Forgery, 跨站域请求伪造)是一种网络的攻击方式,该攻击可以在受害者毫不知情的情况下以受害者名义伪造请求发送给受攻击站点,从而在并未授权的情况下 ...
- protobuf编译出错的解决方案(iOS,OSX)
protobuf 最近使用protobuf,变编译工具时遇上一点问题.现在附上解决方案 编译过程 完全参照 https://github.com/alexeyxo/protobuf-objc 编译出错 ...
- Spark 官方文档(2)——集群模式
Spark版本:1.6.2 简介:本文档简短的介绍了spark如何在集群中运行,便于理解spark相关组件.可以通过阅读应用提交文档了解如何在集群中提交应用. 组件 spark应用程序通过主程序的Sp ...
- CF Round #367 C题
题目 链接:http://codeforces.com/contest/706/problem/C 好像又是DP... dp[i][0]表示第i个字符串不翻转成字典序排列的花费,dp[i][1]表示第 ...
- 引用类型的转换问题和instanceof
基本数据类型:
- rabbitmq
send端 import pika credentials = pika.PlainCredentials(') connection = pika.BlockingConnection(pika.C ...
- erlang 虚机CPU 占用高排查
-问题起因 近期线上一组服务中,个别节点服务器CPU使用率很低,只有其他1/4.排除业务不均,曾怀疑是系统top统计错误,从Erlang调度器的利用率调查 找到通过erlang:statistics( ...