博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ng-options和ng-checked在表单中的高级运用
阅读量:7064 次
发布时间:2019-06-28

本文共 962 字,大约阅读时间需要 3 分钟。

hot3.png

AngularJS是当前非常的流行的前端框架,它的语法糖非常多,也极大的方便了前端开发者,但是有着用法还是需要去琢磨一下的

ng-options

在select表单控件中,总结一下目前的几种写法。

普通写法

优点:简单

缺点:

  • 代码很不简洁,如果选项较多就会很乱
  • 不方便渲染,如果option在变需要使用js动态加载
  • 不方便存储对象

使用ng-repeat

ng-repeat是angularJS中非常强大的一个directive,在渲染列表上极大的方便了前端开发者,那么由于有多个重复的option,当然可以使用ng-repeat,用法如下:

优点:

  • 代码简介
  • 可存储对象,取值方便

缺点:

  • 没有默认显示!,在有些界面需求中,select可能是需要placeholder一样的显示提示效果的,那么使用这个方式显示效果默认是空白
  • 无法通过ng-model来获取当前选择的值

使用ng-options

这里使用一个年级、班级的选项来作为例子:即选择年级之后再显示对应的可选班级。

注:

  • “请选择"的option需要有value,不然会报错
  • 如果要设置默认选择值,比如一开始就选择"高一",则需要设置modal在数组里的对象。
$scope.modal.grade = $scope.modal.grades[2];//高一在数组的位置角标为2

优点:

  • 代码简洁,易于维护
  • 有默认显示
  • 可以使用ng-modal准确获取当前选择的对象

ng-checked

checkbox和radio是我们经常使用到的表单组件,那么如何使用angularJs简洁方便的获取当前已选择对象呢?

这里只说angularJs的用法:

下面依然以年级和班级为例:

{
{class.id+'班'}}

最后需要查看有哪些checkbox被选中时,只需要遍历$scope.grade.classes数组查看有哪些对象的is_checked属性为true即可。

radio的用法同理。

转载于:https://my.oschina.net/keysITer/blog/792025

你可能感兴趣的文章
Carrie Higbie:数据中心的绿色布线之道
查看>>
ECS之初体验
查看>>
我的友情链接
查看>>
【风云原创】Flash技术将被Html5枪毙,Silverlight将何去何从?
查看>>
power shell测试wmi
查看>>
话里话外:成功CEO的用人之道——按需激励
查看>>
openwrt无线连接互联网的实现原理【1】
查看>>
WPS for Linux(ubuntu)字体配置(字体缺失解决办法)
查看>>
谷歌为Pwnium***竞赛再掷重金 将提供200万美元奖金
查看>>
搭建K8S高可用集群(二进制方式)
查看>>
BSON与JSON的区别
查看>>
我的友情链接
查看>>
Play Framework 模板里使用注入访问数据层
查看>>
Win2008学习(十一),解决Remote App Web访问的证书问题
查看>>
python 实现 自动oa 签到签退 发送邮件提醒
查看>>
今天打开阿里妈妈惊现 ¥50 元佣金
查看>>
Oracle 正确删除archivelog文件
查看>>
微信JS 关闭网页
查看>>
[AAuto]给百宝箱增加娱乐功能
查看>>
Tigase XMPP Server源码部署
查看>>