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 继承的实现
Jul 09 Javascript
复制小说文本时出现的随机乱码的去除方法
Sep 07 Javascript
关于JQuery($.load)事件的用法和分析
Apr 09 Javascript
js中获取时间new Date()的全面介绍
Jun 20 Javascript
详解JS去重及字符串奇数位小写转大写
Dec 29 Javascript
JSON 数据详解及实例代码分析
Jan 20 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
May 17 Javascript
利用node.js制作命令行工具方法教程(一)
Jun 22 Javascript
vue router使用query和params传参的使用和区别
Nov 13 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
Mar 09 Javascript
mpvue跳转页面及注意事项
Aug 03 Javascript
JS async 函数的含义和用法实例总结
Apr 08 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生成二维码的几种方式整理及使用实例
2013/06/03 PHP
PHP合并数组+号和array_merge的区别
2015/06/25 PHP
PHP编写文件多服务器同步程序
2016/07/02 PHP
PHP实现在数据库百万条数据中随机获取20条记录的方法
2017/04/19 PHP
利用PHP获取汉字首字母并且分组排序详解
2017/10/22 PHP
使用GruntJS链接与压缩多个JavaScript文件过程详解
2013/08/02 Javascript
jquery实现树形二级菜单实例代码
2013/11/20 Javascript
js使用eval解析json实例与注意事项分享
2014/01/18 Javascript
一不小心就做错的JS闭包面试题
2015/11/25 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
2016/05/25 Javascript
javascript设计模式之module(模块)模式
2016/08/19 Javascript
如何处理JSON中的特殊字符
2016/11/30 Javascript
微信小程序 数据交互与渲染实例详解
2017/01/21 Javascript
jQuery插件DataTables分页开发心得体会
2017/08/22 jQuery
vue组件(全局,局部,动态加载组件)
2018/09/02 Javascript
React 使用recharts实现散点地图的示例代码
2018/12/07 Javascript
JS实现获取自定义属性data值的方法示例
2018/12/19 Javascript
[04:16]DOTA2英雄梦之声_第09期_斧王
2014/06/21 DOTA
[01:07]2015国际邀请赛 中国区预选赛精彩回顾
2015/06/15 DOTA
[13:25]VP vs VICI (BO3)
2018/06/07 DOTA
详解Python中dict与set的使用
2015/08/10 Python
Python使用itertools模块实现排列组合功能示例
2018/07/02 Python
Python使用matplotlib绘制圆形代码实例
2020/05/27 Python
CSS3实现背景透明文字不透明的示例代码
2018/06/25 HTML / CSS
美国受信赖的教育产品供应商:Nest Learning
2018/06/14 全球购物
建筑专业自荐信范文
2014/01/05 职场文书
作文批改评语大全
2014/04/23 职场文书
幼儿园亲子活动总结
2014/04/26 职场文书
校外活动方案
2014/08/28 职场文书
党员批评与自我批评发言材料
2014/10/14 职场文书
工作证明英文模板
2014/10/21 职场文书
确保工程质量承诺书
2015/04/29 职场文书
优秀乡村医生事迹材料(2016精选版)
2016/02/29 职场文书
mysql 8.0.24 安装配置方法图文教程
2021/05/12 MySQL
蓝牙耳机怎么连接电脑win11? Win11蓝牙耳机连接电脑的技巧
2023/01/09 数码科技