ng-options和ng-checked在表单中的高级运用(推荐)


Posted in Javascript onJanuary 21, 2017

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

ng-options

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

普通写法

<select>
  <option value="test1">test1</option>
  <option value="test1">test1</option>
  <option value="test1">test1</option>
  <option value="test1">test1</option>
</select>

优点:简单

缺点:

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

使用ng-repeat

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

<select>
  <option ng-repeat="option in options" value="{{option}}">{{option.name}}</option>
</select>
<script>
  $scope.options = [{id:1,name:'test1'},{id:2,name:'test2'},{id:3,name:'test3'}];
</scirpt>

优点:

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

缺点:

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

使用ng-options

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

<select ng-model="modal.grade" ng-change="modalChangeGrade()" ng-options="grade.gradeText for grade in modal.grades">
  <option value="" disabled>请选择</option>
</select>
<script>
  $scope.modal.grades = [
  {id:1,gradeText:'初一',classes:[]},
  {id:2,gradeText:'初二',classes:[]},
  {id:3,gradeText:'高一'},classes:[]];
  $scope.modalChangeGrade = function(){
    //班级的HTML片段就不在这里写了
    $scope.modal.classes = $scope.modal.grade.classes;
  }
</scirpt>

注:

“请选择"的option需要有value,不然会报错

如果要设置默认选择值,比如一开始就选择"高一",则需要设置modal在数组里的对象。

$scope.modal.grade = $scope.modal.grades[2];//高一在数组的位置角标为2

优点:

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

ng-checked

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

这里只说angularJs的用法:

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

<div ng-repeat="class in grade.classes" ng-click="class.is_checked=!class.is_checked">
  <input type="checkbox" value="" ng-checked="class.is_checked">
  {{class.id+'班'}}
</div>

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

radio的用法同理。

以上所述是小编给大家介绍的ng-options和ng-checked在表单中的高级运用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js简易namespace管理器 实例代码
Jun 21 Javascript
JS操作数据库的实例代码
Oct 17 Javascript
JavaScript避免代码的重复执行经验技巧分享
Apr 17 Javascript
Jquery Post处理后不进入回调的原因及解决方法
Jul 15 Javascript
兼容主流浏览器的JS复制内容到剪贴板
Dec 12 Javascript
JavaScript中removeChild 方法开发示例代码
Aug 15 Javascript
最常见的左侧分类菜单栏jQuery实现代码
Nov 28 Javascript
jQuery中值得注意的trigger方法浅析
Dec 12 Javascript
js中的闭包学习心得
Feb 06 Javascript
教你如何用node连接redis的示例代码
Jul 12 Javascript
vue中组件的3种使用方式详解
Mar 23 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
vue实现添加标签demo示例代码
Jan 21 #Javascript
微信小程序 数据交互与渲染实例详解
Jan 21 #Javascript
前端编码规范(3)JavaScript 开发规范
Jan 21 #Javascript
Bootstrap框架安装使用详解
Jan 21 #Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
Jan 21 #Javascript
微信小程序 九宫格实例代码
Jan 21 #Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
Jan 21 #Javascript
You might like
火车头discuz6.1 完美采集的php接口文件
2009/09/13 PHP
PHP原理之异常机制深入分析
2010/08/08 PHP
PHP面向对象教程之自定义类
2014/06/10 PHP
重新认识php array_merge函数
2014/08/31 PHP
PHP使用glob函数遍历目录或文件夹的方法
2014/12/16 PHP
PHP使用缓存即时输出内容(output buffering)的方法
2015/08/03 PHP
php版微信公众号自定义分享内容实现方法
2016/09/22 PHP
PHP自定义函数实现数组比较功能示例
2017/10/19 PHP
新手入门常用代码集锦
2007/01/11 Javascript
初窥JQuery(二)事件机制(2)
2010/12/06 Javascript
Javascript Throttle &amp; Debounce应用介绍
2013/03/19 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
2013/08/30 Javascript
纯javascript模仿微信打飞机小游戏
2015/08/20 Javascript
动态更新highcharts数据的实现方法
2016/05/28 Javascript
基于JavaScript实现购物网站商品放大镜效果
2016/09/06 Javascript
vue.js指令v-for使用及索引获取
2016/11/03 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
2017/03/06 Javascript
利用vue-i18n实现多语言切换效果的方法
2019/06/19 Javascript
Vue通过WebSocket建立长连接的实现代码
2019/11/05 Javascript
通过实例了解Javascript柯里化流程
2020/03/03 Javascript
python检测远程服务器tcp端口的方法
2015/03/14 Python
Windows中安装使用Virtualenv来创建独立Python环境
2016/05/31 Python
基于windows下pip安装python模块时报错总结
2018/06/12 Python
python学生信息管理系统(初级版)
2018/10/17 Python
python使用Plotly绘图工具绘制气泡图
2019/04/01 Python
Python如何优雅获取本机IP方法
2019/11/10 Python
惠普美国官方商店:HP Official Store
2016/08/28 全球购物
杭州SQL浙江浙大网新恩普软件有限公司
2013/07/27 面试题
教育实习生的自我评价分享
2013/11/21 职场文书
初三学生个人自我评定
2014/04/06 职场文书
光棍节联谊晚会活动策划书
2014/10/10 职场文书
初中作文评语集锦
2014/12/25 职场文书
《神奇的鸟岛》教学反思
2016/02/22 职场文书
springboot @ConfigurationProperties和@PropertySource的区别
2021/06/11 Java/Android
Python操作CSV格式文件的方法大全
2021/07/15 Python
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs