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 相关文章推荐
JS下拉框内容左右移动效果的具体实现
Jul 10 Javascript
js返回顶部实例分享
Dec 21 Javascript
js实现淡入淡出轮播切换功能
Jan 13 Javascript
基于Angular.js实现的触摸滑动动画实例代码
Feb 19 Javascript
关于Stream和Buffer的相互转换详解
Jul 26 Javascript
Three.js入门之hello world以及如何绘制线
Sep 25 Javascript
在vue中安装使用vux的教程详解
Sep 16 Javascript
node中的密码安全(加密)
Sep 17 Javascript
javascript中join方法实例讲解
Feb 21 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
Aug 02 Javascript
浅谈React中组件逻辑复用的那些事儿
May 21 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
Jul 22 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
2.PHP入门
2006/10/09 PHP
php 字符串中的\n换行符无效、不能换行的解决方法
2014/04/02 PHP
JQuery中的ready函数冲突的解决方法
2010/05/17 Javascript
再次分享18个非常棒的jQuery表格插件
2011/04/10 Javascript
如何判断元素是否为HTMLElement元素
2013/12/06 Javascript
js如何判断用户是否是用微信浏览器
2014/06/05 Javascript
详解AngularJS中的表达式使用
2015/06/16 Javascript
教你如何在Node.js中使用jQuery
2016/08/28 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
2016/11/22 Javascript
关于JavaScript中的this指向问题总结篇
2017/07/23 Javascript
jQuery实现checkbox的简单操作
2017/11/18 jQuery
Angular2进阶之如何避免Dom误区
2018/04/02 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
2019/04/28 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
2020/05/06 Javascript
python求素数示例分享
2014/02/16 Python
Python输出PowerPoint(ppt)文件中全部文字信息的方法
2015/04/28 Python
python魔法方法-属性转换和类的表示详解
2016/07/22 Python
centos6.5安装python3.7.1之后无法使用pip的解决方案
2019/02/14 Python
Python匿名函数及应用示例
2019/04/09 Python
基于python框架Scrapy爬取自己的博客内容过程详解
2019/08/05 Python
关于windows下Tensorflow和pytorch安装教程
2020/02/04 Python
PyCharm 无法 import pandas 程序卡住的解决方式
2020/03/09 Python
Pygame的程序开始示例代码
2020/05/07 Python
Python爬虫爬取博客实现可视化过程解析
2020/06/29 Python
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
2013/01/06 HTML / CSS
HTML5 Canvas 实现K线图的示例代码
2019/12/23 HTML / CSS
TripAdvisor台湾:全球最大旅游网站
2018/08/26 全球购物
入党自荐书范文
2014/03/09 职场文书
买房协议书
2014/04/11 职场文书
四风问题专项整治工作情况报告
2014/10/28 职场文书
2015年乡镇科普工作总结
2015/05/13 职场文书
学生会主席任命书
2015/09/21 职场文书
为什么不建议在go项目中使用init()
2021/04/12 Golang
解决MySQL存储时间出现不一致的问题
2021/04/28 MySQL
防止web项目中的SQL注入
2021/12/06 MySQL
mysql查找连续出现n次以上的数字
2022/05/11 MySQL