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代码
Aug 29 Javascript
Textarea根据内容自适应高度
Oct 28 Javascript
jquery $.fn $.fx是什么意思有什么用
Nov 04 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
Jan 12 Javascript
BootStrap下jQuery自动完成的样式调整
May 30 Javascript
JavaScript中值类型和引用类型的区别
Feb 23 Javascript
js自定义瀑布流布局插件
May 16 Javascript
angular2路由之routerLinkActive指令【推荐】
May 30 Javascript
详解Vue-axios 设置请求头问题
Dec 06 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
Oct 11 Javascript
使用 UniApp 实现小程序的微信登录功能
Jun 09 Javascript
原生JavaScript实现购物车
Jan 10 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
怎样去阅读一份php源代码
2009/08/21 PHP
php生成html文件方法总结
2014/12/01 PHP
PHP实现恶意DDOS攻击避免带宽占用问题方法
2015/05/27 PHP
Yii2框架实现登录、退出及自动登录功能的方法详解
2017/10/24 PHP
PHP+Ajax实现的博客文章添加类别功能示例
2018/03/29 PHP
PHP封装mysqli基于面向对象的mysql数据库操作类与用法示例
2019/02/25 PHP
PHP 超级全局变量相关总结
2020/06/30 PHP
关于Aptana Studio生成自动备份文件的解决办法
2009/12/23 Javascript
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
2010/10/20 Javascript
javascript面向对象程序设计(一)
2015/01/29 Javascript
BootStrap selectpicker
2016/06/20 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
2016/11/22 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
2017/02/15 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
2019/10/26 Javascript
es6数组之扩展运算符操作实例分析
2020/04/25 Javascript
jQuery使用jsonp实现百度搜索的示例代码
2020/07/08 jQuery
JS sort方法基于数组对象属性值排序
2020/07/10 Javascript
[03:37]2016完美“圣”典 风云人物:Mikasa专访
2016/12/07 DOTA
[51:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/30 DOTA
python生成式的send()方法(详解)
2017/05/08 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
Django之路由层的实现
2019/09/09 Python
django使用xadmin的全局配置详解
2019/11/15 Python
解决Django响应JsonResponse返回json格式数据报错问题
2020/08/09 Python
python super()函数的基本使用
2020/09/10 Python
Opencv常见图像格式Data Type及代码实例
2020/11/02 Python
python中封包建立过程实例
2021/02/18 Python
CSS3实现王者匹配时的粒子动画效果
2019/04/12 HTML / CSS
BookOutlet加拿大:在网上书店购买廉价折扣图书和小说
2018/10/05 全球购物
中秋节超市促销方案
2014/01/30 职场文书
争先创优活动总结
2014/08/27 职场文书
学习焦裕禄同志为人民服务思想汇报
2014/09/10 职场文书
2014年度安全工作总结
2014/12/04 职场文书
2015年师德师风承诺书
2015/01/22 职场文书
一文帮你理解PReact10.5.13源码
2021/04/03 Javascript