全网整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:400-708-3566

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

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在表单中的高级运用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!


# ng  # checked  # model  # AngularJS入门教程之ng-checked 指令详解  # 郁闷!ionic中获取ng-model绑定的值为undefined如何解决  # AngularJs 弹出模态框(model)  # angularjs自定义ng-model标签的属性  # angularjs在ng-repeat中使用ng-model遇到的问题  # Django中模型Model添加JSON类型字段的方法  # 高一  # 表单  # 请选择  # 可以使用  # 小编  # 中非  # 便了  # 在这里  # 有哪些  # 多个  # 在此  # 就不  # 遍历  # 给大家  # 较多  # 写了  # 几种  # 只需要  # 可选  # 为例 


相关文章: c# await 一个已经完成的Task会发生什么  网页制作模板网站推荐,网页设计海报之类的素材哪里好?  油猴 教程,油猴搜脚本为什么会网页无法显示?  ,在苏州找工作,上哪个网站比较好?  如何选择域名并搭建高效网站?  MySQL查询结果复制到新表的方法(更新、插入)  电商网站制作公司有哪些,1688网是什么意思?  宝塔建站助手安装配置与建站模板使用全流程解析  网站制作需要会哪些技术,建立一个网站要花费多少?  如何在腾讯云免费申请建站?  上海制作企业网站有哪些,上海有哪些网站可以让企业免费发布招聘信息?  小米网站链接制作教程,请问miui新增网页链接调用服务有什么用啊?  建站之星各版本价格是多少?  如何通过cPanel快速搭建网站?  如何在阿里云虚拟机上搭建网站?步骤解析与避坑指南  建站之星如何助力企业快速打造五合一网站?  建站之星官网登录失败?如何快速解决?  宝塔建站教程:一键部署配置流程与SEO优化实战指南  网站制作报价单模板图片,小松挖机官方网站报价?  在线流程图制作网站手机版,谁能推荐几个好的CG原画资源网站么?  济南网站建设制作公司,室内设计网站一般都有哪些功能?  网页设计网站制作软件,microsoft office哪个可以创建网页?  网站制作公司排行榜,抖音怎样做个人官方网站  成都品牌网站制作公司,成都营业执照年报网上怎么办理?  公司网站制作费用多少,为公司建立一个网站需要哪些费用?  品牌网站制作公司有哪些,买正品品牌一般去哪个网站买?  攀枝花网站建设,攀枝花营业执照网上怎么年审?  建站之星如何实现五合一智能建站与营销推广?  如何基于PHP生成高效IDC网络公司建站源码?  如何在阿里云ECS服务器部署织梦CMS网站?  电视网站制作tvbox接口,云海电视怎样自定义添加电视源?  建站主机默认首页配置指南:核心功能与访问路径优化  如何在Windows虚拟主机上快速搭建网站?  可靠的网站设计制作软件,做网站设计需要什么样的电脑配置?  儿童网站界面设计图片,中国少年儿童教育网站-怎么去注册?  建站之星如何快速更换网站模板?  如何在万网开始建站?分步指南解析  建站之星如何修改网站生成路径?  武汉网站如何制作,黄黄高铁武穴北站途经哪些村庄?  沈阳个人网站制作公司,哪个网站能考到沈阳事业编招聘的信息?  建站主机系统SEO优化与智能配置核心关键词操作指南  如何在Golang中实现微服务服务拆分_Golang微服务拆分与接口管理方法  如何快速搭建高效WAP手机网站?  如何通过wdcp面板快速创建网站?  广德云建站网站建设方案与建站流程优化指南  深圳网站制作案例,网页的相关名词有哪些?  全景视频制作网站有哪些,全景图怎么做成网页?  制作公司内部网站有哪些,内网如何建网站?  网站微信制作软件,如何制作微信链接?  文字头像制作网站推荐软件,醒图能自动配文字吗? 

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。