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 相关文章推荐
网页自动刷新,不产生嗒嗒声的一个解决方法
Mar 27 Javascript
判断文档离浏览器顶部的距离的方法
Jan 08 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
Jan 18 Javascript
获取阴历(农历)和当前日期的js代码
Feb 15 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
Jul 01 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
Oct 15 Javascript
关于Javascript中document.cookie的使用
Mar 08 Javascript
JavaScript原型继承_动力节点Java学院整理
Jun 30 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
Sep 29 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
Dec 11 Javascript
微信小程序实现canvas分享朋友圈海报
Jun 21 Javascript
关于vue属性使用和不使用冒号的区别说明
Oct 22 Javascript
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
php中删除、清空session的方式总结
2015/10/09 PHP
PHP PDOStatement::rowCount讲解
2019/02/01 PHP
Js 中debug方式
2010/02/07 Javascript
input禁止键盘及中文输入,但可以点击
2014/02/13 Javascript
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
常用jQuery选择器总结
2014/07/11 Javascript
JavaScript导出Excel实例详解
2014/11/25 Javascript
jQuery中innerHeight()方法用法实例
2015/01/19 Javascript
JavaScript实现列表分页功能特效
2015/05/15 Javascript
如何提高Dom访问速度
2017/01/05 Javascript
工厂模式在JS中的实践
2017/01/18 Javascript
JavaScript hasOwnProperty() 函数实例详解
2017/08/04 Javascript
vue2.0 常用的 UI 库实例讲解
2017/12/12 Javascript
vue实现树形菜单效果
2018/03/19 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
2018/07/24 jQuery
对Vue- 动态元素属性及v-bind和v-model的区别详解
2018/08/27 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
2019/01/15 jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
2019/04/16 jQuery
微信小程序和H5页面间相互跳转代码实例
2019/09/19 Javascript
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
JS出现404错误原理及解决方案
2020/07/01 Javascript
[00:59]DOTA2背景故事第二期之四大基本法则
2020/07/07 DOTA
Python爬虫包BeautifulSoup异常处理(二)
2018/06/17 Python
Python 正则表达式匹配字符串中的http链接方法
2018/12/25 Python
python matplotlib库绘制条形图练习题
2019/08/10 Python
pytorch: Parameter 的数据结构实例
2019/12/31 Python
利用Python实现某OA系统的自动定位功能
2020/05/27 Python
几款好用的python工具库(小结)
2020/10/20 Python
HTML5标签大全
2016/11/23 HTML / CSS
保加利亚运动鞋购物网站:SneakerStudio.bg
2020/12/23 全球购物
安全生产月活动总结
2014/05/04 职场文书
出生证明范本
2015/06/15 职场文书
敬老院活动感想
2015/08/07 职场文书
2016年中学法制宣传日活动总结
2016/04/01 职场文书
如何制作自己的原生JavaScript路由
2021/05/05 Javascript
java executor包参数处理功能 
2022/02/15 Java/Android