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 相关文章推荐
FormValid0.5版本发布,带ajax自定义验证例子
Aug 17 Javascript
ExtJS4 组件化编程,动态加载,面向对象,Direct
May 12 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
Jan 11 Javascript
HTML5实现留言和回复页面样式
Jul 22 Javascript
jQuery满屏焦点图左右滚动特效代码分享
Sep 07 Javascript
在nginx上部署vue项目(history模式)的方法
Dec 28 Javascript
解决VUEX兼容IE上的报错问题
Mar 01 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
Nov 20 Javascript
JavaScript变速动画函数封装添加任意多个属性
Apr 03 Javascript
小程序分享模块超级详解(推荐)
Apr 10 Javascript
微信小程序 checkbox使用实例解析
Sep 09 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
Oct 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
星际流派综述
2020/03/04 星际争霸
php minixml详解
2008/07/19 PHP
PHP 杂谈《重构-改善既有代码的设计》之五 简化函数调用
2012/05/07 PHP
PHP以及MYSQL日期比较方法
2012/11/29 PHP
PHP中常用的转义函数
2014/02/28 PHP
php获取远程文件大小
2015/10/20 PHP
兼容多浏览器的字幕特效Marquee的通用js类
2008/07/20 Javascript
javascript 常用方法总结
2009/06/03 Javascript
基于jquery的一个浮动框(扩展性比较好 )
2010/08/27 Javascript
jquery 元素相对定位代码
2010/10/15 Javascript
jQuery控制Div拖拽效果完整实例分析
2015/04/15 Javascript
基于jQuery实现放大镜特效
2020/10/19 Javascript
javascript代码调试之console.log 用法图文详解
2016/09/30 Javascript
微信小程序 wxapp画布 canvas详细介绍
2016/10/31 Javascript
JavaScript函数表达式详解及实例
2017/05/05 Javascript
jQuery实现ajax回调函数带入参数的方法示例
2018/06/26 jQuery
微信小程序class封装http代码实例
2019/08/24 Javascript
Vue利用Blob下载原生二进制数组文件
2019/09/25 Javascript
[02:04]完美世界城市挑战赛秋季赛报名开始 谁是solo路人王?
2019/10/10 DOTA
python爬虫系列Selenium定向爬取虎扑篮球图片详解
2017/11/15 Python
Python3实现的画图及加载图片动画效果示例
2018/01/19 Python
django之对FileField字段的upload_to的设定方法
2019/07/28 Python
python scrapy爬虫代码及填坑
2019/08/12 Python
基于tf.shape(tensor)和tensor.shape()的区别说明
2020/06/30 Python
TensorFlow低版本代码自动升级为1.0版本
2021/02/20 Python
H5 video poster属性设置视频封面的方法
2020/05/25 HTML / CSS
Mytheresa中国官网:德国时尚奢侈品商城
2017/08/04 全球购物
Linux常见面试题
2013/03/18 面试题
关于打架的检讨书
2014/01/17 职场文书
2014年父亲节活动方案
2014/03/06 职场文书
办公设备采购方案
2014/03/16 职场文书
应用心理学专业求职信
2014/08/04 职场文书
村班子对照检查材料
2014/08/18 职场文书
党委干部批评与自我批评发言稿
2014/09/28 职场文书
2015个人半年总结范文
2015/03/09 职场文书
2015年妇幼保健工作总结
2015/05/19 职场文书