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使浏览器窗口最大化实现代码(适用于IE)
Aug 07 Javascript
js判断选择时间不能小于当前时间的示例代码
Sep 24 Javascript
javascript中JSON对象与JSON字符串相互转换实例
Jul 11 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
Mar 09 Javascript
javascript模块化简单解析
Apr 07 Javascript
ECMAScript6轮播图实践知识总结
Aug 17 Javascript
JS实现列表的响应式排版(推荐)
Sep 01 Javascript
鼠标经过出现气泡框的简单实例
Mar 17 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
Mar 30 Javascript
Vue在页面数据渲染完成之后的调用方法
Sep 11 Javascript
浅谈vue.use()方法从源码到使用
May 12 Javascript
vue 组件内获取actions的response方式
Nov 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 智能404跳转代码,适合换域名没改变目录的网站
2010/06/04 PHP
yii2中添加验证码的实现方法
2016/01/09 PHP
基于jquery的loading效果实现代码
2010/11/05 Javascript
Javascript自定义排序 node运行 实例
2013/06/05 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
2014/04/20 Javascript
bootstrap中使用google prettify让代码高亮的方法
2016/10/21 Javascript
js实现右键菜单功能
2016/11/28 Javascript
详解Node项目部署到云服务器上
2017/07/12 Javascript
vue-router实现组件间的跳转(参数传递)
2017/11/07 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
2018/01/08 jQuery
vue+element-ui实现表格编辑的三种实现方式
2018/10/31 Javascript
ES6 async、await的基本使用方法示例
2020/06/06 Javascript
vue2.0实现列表数据增加和删除
2020/06/17 Javascript
Python中的一些陷阱与技巧小结
2015/07/10 Python
用Python编写一个简单的CS架构后门的方法
2018/11/20 Python
Django框架模板的使用方法示例
2019/05/25 Python
Pyqt清空某一个QTreeewidgetItem下的所有分支方法
2019/06/17 Python
python调用其他文件函数或类的示例
2019/07/16 Python
django页面跳转问题及注意事项
2019/07/18 Python
10个Python面试常问的问题(小结)
2019/11/20 Python
在tensorflow中实现屏蔽输出的log信息
2020/02/04 Python
深入理解Python变量的数据类型和存储
2021/02/01 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
美国宠物护理专家:Revival Animal Health
2020/01/05 全球购物
经典的班主任推荐信
2013/10/28 职场文书
幼师自我鉴定
2014/02/01 职场文书
市级三好学生评语
2014/12/29 职场文书
初三英语教学计划
2015/01/23 职场文书
前台接待员岗位职责
2015/04/15 职场文书
授权协议书范本(3篇)
2019/10/15 职场文书
go:垃圾回收GC触发条件详解
2021/04/24 Golang
Python 制作自动化翻译工具
2021/04/25 Python
python实现股票历史数据可视化分析案例
2021/06/10 Python
mysql5.6主从搭建以及不同步问题详解
2021/12/04 MySQL
68行Python代码实现带难度升级的贪吃蛇
2022/01/18 Python
SQL解决未能删除约束问题drop constraint
2022/05/30 SQL Server