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压缩混淆工具
May 16 Javascript
offsetParent 算法分析
Apr 05 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
May 30 Javascript
javascript break指定标签打破多层循环示例
Jan 20 Javascript
纯JS实现动态时间显示代码
Feb 08 Javascript
node.js中的fs.fchmod方法使用说明
Dec 16 Javascript
jQuery实现美观的多级动画效果菜单代码
Sep 06 Javascript
jquery自定义右键菜单、全选、不连续选择
Mar 01 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
Apr 25 Javascript
收藏AngularJS中最重要的核心功能
Jul 09 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
Nov 10 Javascript
手把手教您实现react异步加载高阶组件
Apr 07 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
在Zeus Web Server中安装PHP语言支持
2006/10/09 PHP
PHP执行linux系统命令的常用函数使用说明
2010/04/27 PHP
php输出xml格式字符串(用的这个)
2012/07/12 PHP
DEDECMS首页调用图片集里的多张图片
2015/06/05 PHP
js window.print实现打印特定控件或内容
2013/09/16 Javascript
checkbox选中与未选中判断示例
2014/08/04 Javascript
js怎么判断flash swf文件是否加载完毕
2014/08/14 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
js实现防止被iframe的方法
2015/07/03 Javascript
浅谈JavaScript中运算符的优先级
2015/07/07 Javascript
设置点击文本框或图片弹出日历控件的实现代码
2016/05/12 Javascript
浅谈JavaScript函数的四种存在形态
2016/06/08 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
2016/08/05 Javascript
AngularJS 打开新的标签页实现代码
2017/09/07 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
2019/02/28 Javascript
Vue数据双向绑定底层实现原理
2019/11/22 Javascript
微信小程序实现上传多张图片、删除图片
2020/07/29 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
简单介绍Ruby中的CGI编程
2015/04/10 Python
python求解水仙花数的方法
2015/05/11 Python
python实现的多线程端口扫描功能示例
2017/01/21 Python
python处理Excel xlrd的简单使用
2017/09/12 Python
python3实现全角和半角字符转换的方法示例
2017/09/21 Python
Python中GeoJson和bokeh-1的使用讲解
2019/01/03 Python
PyTorch的深度学习入门教程之构建神经网络
2019/06/27 Python
python-OpenCV 实现将数组转换成灰度图和彩图
2020/01/09 Python
Python3.9 beta2版本发布了,看看这7个新的PEP都是什么
2020/06/10 Python
html5 Canvas绘制线条 closePath()实例代码
2012/05/10 HTML / CSS
致800米运动员广播稿
2014/02/16 职场文书
2014年道德讲堂实施方案
2014/03/05 职场文书
领导干部保密承诺书
2014/08/30 职场文书
公共场所禁烟倡议书
2014/08/30 职场文书
安全在我心中演讲稿
2014/09/01 职场文书
2014年人力资源工作总结
2014/11/19 职场文书
送达通知书
2015/04/25 职场文书
提升Nginx性能的一些建议
2021/03/31 Servers