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 相关文章推荐
jquery向.ashx文件post中文乱码问题的解决方法
Mar 28 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
Nov 19 Javascript
jquery教程ajax请求json数据示例
Jan 13 Javascript
js实现点击图片改变页面背景图的方法
Feb 28 Javascript
jQuery代码实现对话框右上角菜单带关闭×
May 03 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
Jun 17 Javascript
Bootstrap插件全集
Jul 18 Javascript
AngularJS实现网站换肤实例
Feb 19 Javascript
vue引用js文件的多种方式(推荐)
May 17 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
Sep 03 Javascript
Vue-CLI 项目在pycharm中配置方法
Aug 30 Javascript
vue实现短信验证码登录功能(流程详解)
Dec 10 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
一次编写,随处运行
2006/10/09 PHP
php解析xml 的四种简单方法(附实例)
2016/07/11 PHP
Yii2创建控制器(createController)方法详解
2016/07/23 PHP
PHP使用两个栈实现队列功能的方法
2018/01/15 PHP
php和html的区别点详细总结
2019/09/24 PHP
使用js实现关闭js弹出层的窗口
2014/02/10 Javascript
javascript 常用验证函数总结
2016/06/28 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
2016/06/28 Javascript
深入分析javascript中的错误处理机制
2016/07/17 Javascript
jquery实现下拉框多选方法介绍
2017/01/03 Javascript
Angular2入门--架构总览
2017/03/29 Javascript
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
javascript中数组的常用算法深入分析
2019/03/12 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
2019/03/26 Javascript
详解Vue组件之间通信的七种方式
2019/04/14 Javascript
浅谈关于vue中scss公用的解决方案
2019/12/02 Javascript
Vue实现图片与文字混输效果
2019/12/04 Javascript
JS实现星星海特效
2019/12/24 Javascript
jQuery实现异步上传一个或多个文件
2020/08/17 jQuery
[01:10]DOTA2次级职业联赛 - U5战队宣传片
2014/12/01 DOTA
[55:47]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第三局
2016/02/27 DOTA
Python+Opencv识别两张相似图片
2020/03/23 Python
Python 模拟购物车的实例讲解
2017/09/11 Python
python进行文件对比的方法
2018/12/24 Python
通过celery异步处理一个查询任务的完整代码
2019/11/19 Python
python设置代理和添加镜像源的方法
2020/02/14 Python
python3.4中清屏的处理方法
2020/07/06 Python
利用python对excel中一列的时间数据更改格式操作
2020/07/14 Python
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
新加坡第一的杂货零售商:NTUC FairPrice
2020/12/05 全球购物
经济与贸易专业应届生求职信
2013/11/19 职场文书
联谊活动策划书
2014/01/26 职场文书
群众路线班子对照检查材料
2014/09/25 职场文书
2016年春节慰问信息大全
2015/11/30 职场文书
2016年党员岗位承诺书
2016/03/24 职场文书
k8s部署redis cluster集群的实现
2021/06/24 Redis