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 相关文章推荐
表单的一些基本用法与技巧
Jul 15 Javascript
jQuery操作checkbox选择(list/table)
Apr 07 Javascript
js工具方法弹出蒙版
May 08 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
Jan 19 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
May 21 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
Mar 17 Javascript
JS基于正则表达式的替换操作(replace)用法示例
Apr 28 Javascript
AngularJS 教程及实例代码
Oct 23 Javascript
使用webpack打包koa2 框架app
Feb 02 Javascript
vue 实现全选全不选的示例代码
Mar 29 Javascript
js继承的这6种方式!(上)
Apr 23 Javascript
JavaScript ES 模块的使用
Nov 12 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中数组的三种排序方法分享
2012/05/07 PHP
php短址转换实现方法
2015/02/25 PHP
php使用for语句输出三角形的方法
2015/06/09 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
PHP sdk文档处理常用代码示例解析
2020/12/09 PHP
JavaScript中SQL语句的应用实现
2010/05/04 Javascript
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
2011/03/25 Javascript
jQuery的context属性用法实例
2014/12/27 Javascript
JavaScript实现简单的数字倒计时
2015/05/15 Javascript
JavaScript编程中布尔对象的基本使用
2015/10/25 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
2016/04/17 Javascript
jQuery实现删除li节点的方法
2016/12/06 Javascript
vue.js单页面应用实例的简单实现
2017/04/10 Javascript
Javascript中的作用域及块级作用域
2017/12/08 Javascript
vue使用vuex实现首页导航切换不同路由的方法
2019/05/08 Javascript
Node爬取大批量文件的方法示例
2019/06/28 Javascript
VUE.js实现动态设置输入框disabled属性
2019/10/28 Javascript
解决vue-loader加载不上的问题
2020/10/21 Javascript
python实现从字典中删除元素的方法
2015/05/04 Python
Python的time模块中的常用方法整理
2015/06/18 Python
Python执行时间的计算方法小结
2017/03/17 Python
python中in在list和dict中查找效率的对比分析
2018/05/04 Python
Django admin model 汉化显示文字的实现方法
2019/08/12 Python
Python Web静态服务器非堵塞模式实现方法示例
2019/11/21 Python
python 数据类型强制转换的总结
2021/01/25 Python
巴西男士胡须和头发护理产品商店:Beard
2017/11/13 全球购物
澳大利亚Rockwear官网:女子瑜伽、健身和运动服
2021/01/26 全球购物
什么是Deployment descriptors;都有什么类型的部署描述符
2015/07/28 面试题
用Python匹配HTML tag的时候,<.*>和<.*?>有什么区别
2012/11/04 面试题
策划助理岗位职责
2013/11/18 职场文书
二年级小学生评语
2014/04/21 职场文书
党员承诺书范文
2014/05/19 职场文书
2014年共青团工作总结
2014/12/10 职场文书
初中数学课堂教学反思
2016/02/17 职场文书
MySQL创建定时任务
2022/01/22 MySQL
vue3语法糖内的defineProps及defineEmits
2022/04/14 Vue.js