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 相关文章推荐
百度地图api应用标注地理位置信息(js版)
Feb 01 Javascript
js修改input的type属性问题探讨
Oct 12 Javascript
jQuery filter函数使用方法
May 19 Javascript
JavaScript通过join函数连接数组里所有元素的方法
Mar 20 Javascript
jQuery常用的一些技巧汇总
Mar 26 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
Jun 13 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
May 24 Javascript
Vue Socket.io源码解读
Feb 07 Javascript
react router4+redux实现路由权限控制的方法
May 03 Javascript
基于element-ui的rules中正则表达式
Sep 04 Javascript
JS+HTML5 canvas绘制验证码示例
Dec 05 Javascript
JS匿名函数内部this指向问题详析
May 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生成EXCEL的东东
2006/10/09 PHP
php自动跳转中英文页面
2008/07/29 PHP
php cli模式学习(PHP命令行模式)
2013/06/03 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
PHP PDOStatement::bindColumn讲解
2019/01/30 PHP
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
2010/08/13 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
2014/05/08 Javascript
Node.js中HTTP模块与事件模块详解
2014/11/14 Javascript
浅谈js中字符和数组一些基本算法题
2016/08/15 Javascript
js 获取当前web应用的上下文路径实现方法
2016/08/19 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
2016/09/08 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
2016/09/19 Javascript
js实现页面刷新滚动条位置不变
2016/11/27 Javascript
tab栏切换原理
2017/03/22 Javascript
Angular4学习笔记之根模块与Ng模块
2017/09/09 Javascript
详解vue渲染函数render的使用
2017/12/12 Javascript
three.js实现3D影院的原理的代码分析
2017/12/18 Javascript
浅谈vue中.vue文件解析流程
2018/04/24 Javascript
浅谈Webpack核心模块tapable解析
2018/09/11 Javascript
编写v-for循环的技巧汇总
2020/12/01 Javascript
vue二选一tab栏切换新做法实现
2021/01/19 Vue.js
python实现360皮肤按钮控件示例
2014/02/21 Python
python MySQLdb使用教程详解
2018/03/20 Python
Python requests库用法实例详解
2018/08/14 Python
Django模板之基本的 for 循环 和 List内容的显示方式
2020/03/31 Python
Python urllib3软件包的使用说明
2020/11/18 Python
加拿大在线隐形眼镜专家:PerfectLens.ca
2016/11/19 全球购物
最好的商品表达自己:Cafepress
2019/09/04 全球购物
商务主管岗位职责
2013/12/08 职场文书
三分钟演讲稿事例
2014/03/03 职场文书
计生专干事迹
2014/05/28 职场文书
公司市场专员岗位职责
2014/06/29 职场文书
三下乡个人总结
2015/03/04 职场文书
卫生院艾滋病宣传活动总结
2015/05/09 职场文书
党小组鉴定意见
2015/06/02 职场文书
解析:创业计划书和商业计划书二者之间到底有什么区别
2019/08/14 职场文书