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中最常看到切最容易迷惑的语法(转)
Oct 29 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
Dec 24 Javascript
jquery处理json数据实例分析
Jun 03 Javascript
JQuery遍历DOM节点的方法
Jun 11 Javascript
AngularJS 2.0新特性有哪些
Feb 18 Javascript
node中koa中间件机制详解
Aug 22 Javascript
JavaScript实现数字前补“0”的五种方法示例
Jan 03 Javascript
JS实现的全选、全不选及反选功能【案例】
Feb 19 Javascript
layer.js之回调销毁对话框的例子
Sep 11 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
Sep 19 Javascript
JavaScript 面向对象基础简单示例
Oct 02 Javascript
JS跨浏览器解析XML应用过程详解
Oct 16 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
PHP4在Windows2000下的安装
2006/10/09 PHP
PHP屏蔽蜘蛛访问代码及常用搜索引擎的HTTP_USER_AGENT
2013/03/06 PHP
JS复制到剪贴板示例代码
2013/10/30 Javascript
JS去掉第一个字符和最后一个字符的实现代码
2014/02/20 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
2015/01/09 Javascript
Javascript中的call()方法介绍
2015/03/15 Javascript
JavaScript调用客户端Java程序的方法
2015/07/27 Javascript
Jquery实现纵向横向菜单
2016/01/24 Javascript
js转html实体的方法
2016/09/27 Javascript
JavaScript 实现的checkbox经典实例分享
2016/10/16 Javascript
NodeJS基础API搭建服务器详细过程记录
2017/04/01 NodeJs
nodejs集成sqlite使用示例
2017/06/05 NodeJs
BootStrap table实现表格行拖拽效果
2018/12/01 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
2019/02/27 jQuery
详解vue在项目中使用百度地图
2019/03/26 Javascript
vue实现表单录入小案例
2019/09/27 Javascript
解决vue 子组件修改父组件传来的props值报错问题
2019/11/09 Javascript
uni-app实现点赞评论功能
2019/11/25 Javascript
JS实现简单省市二级联动
2019/11/27 Javascript
vue created钩子函数与mounted钩子函数的用法区别
2020/11/05 Javascript
js 数据类型判断的方法
2020/12/03 Javascript
用Python写的图片蜘蛛人代码
2012/08/27 Python
Python的迭代器和生成器使用实例
2015/01/14 Python
在Python的web框架中编写创建日志的程序的教程
2015/04/30 Python
python好玩的项目—色情图片识别代码分享
2017/11/07 Python
python实现图片素描效果
2020/09/26 Python
五分钟学会怎么用Pygame做一个简单的贪吃蛇
2021/01/06 Python
h5实现获取用户地理定位的实例代码
2017/07/17 HTML / CSS
eBay澳大利亚站:eBay.com.au
2018/02/02 全球购物
数以千计的折扣工业产品:ESE Direct
2018/05/20 全球购物
欧洲当代手工玻璃和瓷器的领先品牌:LSA International
2018/06/03 全球购物
Python里面如何拷贝一个对象
2014/02/17 面试题
电子信息毕业生自荐信
2013/11/16 职场文书
房屋转让协议书
2014/04/11 职场文书
小学网上祭英烈活动总结
2014/07/05 职场文书
如何做好工作总结!
2019/04/10 职场文书