angularJs复选框checkbox选中进行ng-show显示隐藏的方法


Posted in Javascript onOctober 08, 2018

如下所示:

ng-true-value="1" //代表选中的时候,值为1
ng-false-value="0" //代表未选中的时候,值为0
<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <script src="angular.min.js"></script>
</head>
<body>
<div ng-app="module" ng-controller="ctrl">
 游戏: <input type="checkbox" ng-model="data.game" ng-true-value="1" ng-false-value="0">
 电影: <input type="checkbox" ng-model="data.video" ng-true-value="1" ng-false-value="0">
 <div ng-show="data.game==1">
  <h1>游戏被选中</h1>
 </div>
 <div ng-show="data.video==1">
  <h1>电影被选中</h1> 
 </div>
</div>
<script>
 var m = angular.module('module', []);
 m.controller('ctrl', ['$scope', function ($scope) {
  $scope.data = {game: 0, video: 0}; //初始化未选中,值为0
 }]);
</script>
</body>
</html>

以上这篇angularJs复选框checkbox选中进行ng-show显示隐藏的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 实现??打印?理
Apr 28 Javascript
jQuery Tools Dateinput使用介绍
Jul 14 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
Aug 14 Javascript
js/jquery去掉空格,回车,换行示例代码
Nov 05 Javascript
如何防止回车(enter)键提交表单
May 11 Javascript
Javascript中的apply()方法浅析
Mar 15 Javascript
JavaScript实现简单的tab选项卡切换
Jan 05 Javascript
如何正确理解javascript的模块化
Mar 02 Javascript
AngularJS的$location使用方法详解
Oct 19 Javascript
js 判断一个数字是不是2的n次方幂的实例
Nov 26 Javascript
JavaScript之解构赋值的理解
Jan 30 Javascript
微信小程序结合mock.js实现后台模拟及调试
Mar 28 Javascript
jquery.param()实现数组或对象的序列化方法
Oct 08 #jQuery
angularJs select绑定的model取不到值的解决方法
Oct 08 #Javascript
基于AngularJs select绑定数字类型的问题
Oct 08 #Javascript
微信小程序wx:for循环的实例详解
Oct 07 #Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
Oct 07 #Javascript
Vue面试题及Vue知识点整理
Oct 07 #Javascript
解决vue无法设置滚动位置的问题
Oct 07 #Javascript
You might like
建立文件交换功能的脚本(三)
2006/10/09 PHP
php通过asort()给关联数组按照值排序的方法
2015/03/18 PHP
php超快高效率统计大文件行数
2015/07/05 PHP
PHP实现的简单分页类及用法示例
2016/05/06 PHP
符合W3C网页标准的iframe标签的使用方法
2007/07/19 Javascript
javascript中callee与caller的用法和应用场景
2010/12/08 Javascript
jQuery版Tab标签切换
2011/03/16 Javascript
javascript面向对象入门基础详细介绍
2012/09/05 Javascript
javascript date格式化示例
2013/09/25 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
2013/10/16 Javascript
js中回调函数的学习笔记
2014/07/31 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
2015/08/21 Javascript
javascript删除html标签函数cIsHTML
2017/01/09 Javascript
js+html获取系统当前时间
2017/11/10 Javascript
webpack写jquery插件的环境配置
2017/12/21 jQuery
vue使用混入定义全局变量、函数、筛选器的实例代码
2019/07/29 Javascript
微信小程序实现定位及到指定位置导航的示例代码
2019/08/20 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
2020/08/19 Javascript
在Python的Flask框架下收发电子邮件的教程
2015/04/21 Python
在Linux命令行终端中使用python的简单方法(推荐)
2017/01/23 Python
wxPython之解决闪烁的问题
2018/01/15 Python
python 多线程将大文件分开下载后在合并的实例
2018/11/09 Python
Python使用Pandas对csv文件进行数据处理的方法
2019/08/01 Python
python GUI库图形界面开发之PyQt5中QWebEngineView内嵌网页与Python的数据交互传参详细方法实例
2020/02/26 Python
Python自动化测试笔试面试题精选
2020/03/12 Python
HTML5的表单(绝对特别强大的功能)使用示例
2013/06/20 HTML / CSS
英国领先的在线旅游和休闲零售商:lastminute.com
2019/01/23 全球购物
医药个人求职信范文
2014/01/29 职场文书
浪漫婚礼主持词
2014/03/14 职场文书
2014标准社保办理委托书
2014/10/06 职场文书
2015年国庆节慰问信
2015/03/23 职场文书
2015公司年度工作总结
2015/05/14 职场文书
婚礼答谢词范文
2015/09/29 职场文书
2016年妇联“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
《好妈妈胜过好老师》:每个孩子的优秀都是有源头的
2020/01/03 职场文书
JS实现简单控制视频播放倍速的实例代码
2021/04/18 Javascript