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脚本实现Web页面信息交互
Dec 21 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
Sep 02 Javascript
jquery操作 iframe的方法
Dec 03 Javascript
JS获取下拉框显示值和判断单选按钮的方法
Jul 09 Javascript
JavaScript实现的类字典插入或更新方法实例
Jul 10 Javascript
bootstrap实现的自适应页面简单应用示例
Mar 09 Javascript
关于foreach循环中遇到的问题小结
May 08 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
Jul 18 Javascript
Node.js控制台彩色输出的方法与原理实例详解
Dec 01 Javascript
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
浅谈JS的二进制家族
May 09 Javascript
vue3 自定义图片放大器效果的示例代码
Jul 23 Vue.js
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
phpinfo 系统查看参数函数代码
2009/06/05 PHP
ThinkPHP查询返回简单字段数组的方法
2014/08/25 PHP
php中关于socket的系列函数总结
2015/05/18 PHP
php实现的错误处理封装类实例
2017/06/20 PHP
ThinkPHP框架实现的微信支付接口开发完整示例
2019/04/10 PHP
javascript window对象属性整理
2009/10/24 Javascript
基于jQuery的日期选择控件
2009/10/27 Javascript
JavaScript初学者应注意的七个细节详细介绍
2012/12/27 Javascript
利用JavaScript检测CPU使用率自己写的
2014/03/22 Javascript
$(document).ready(function() {})不执行初始化脚本
2014/06/19 Javascript
javascript实现完美拖拽效果
2015/05/06 Javascript
浅谈javascript原型链与继承
2015/07/13 Javascript
JS+CSS实现电子商务网站导航模板效果代码
2015/09/10 Javascript
smartcrop.js智能图片裁剪库
2015/10/14 Javascript
使用Curl命令查看请求响应时间方法
2016/11/04 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
2017/10/19 Javascript
详解VUE里子组件如何获取父组件动态变化的值
2018/12/26 Javascript
在vue项目中使用sass语法问题
2019/07/18 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
2019/10/26 Javascript
解决vue-router路由拦截造成死循环问题
2020/08/05 Javascript
如何使用 vue-cli 创建模板项目
2020/11/19 Vue.js
在Python中使用mongoengine操作MongoDB教程
2015/04/24 Python
分分钟入门python语言
2018/03/20 Python
对python字典过滤条件的实例详解
2019/01/22 Python
python web框架中实现原生分页
2019/09/08 Python
PYTHON实现SIGN签名的过程解析
2019/10/28 Python
Python+OpenCV+图片旋转并用原底色填充新四角的例子
2019/12/12 Python
Python连接mysql方法及常用参数
2020/09/01 Python
倩碧澳大利亚官网:Clinique澳大利亚
2019/07/22 全球购物
便利店投资的创业计划书
2014/01/12 职场文书
大学生开西餐厅创业计划书
2014/02/01 职场文书
会展策划与管理专业求职信
2014/06/09 职场文书
试用期旷工辞退通知书
2015/04/17 职场文书
一个独生女的故事观后感
2015/06/04 职场文书
管理者日常工作必备:22条企业管理流程模板!
2019/07/12 职场文书