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 操作符汇总
Nov 08 Javascript
JavaScript中Window对象的属性及事件
Dec 25 Javascript
基于JS+Canves实现点击按钮水波纹效果
Sep 15 Javascript
微信小程序 传值取值的几种方法总结
Jan 16 Javascript
详解微信小程序 wx.uploadFile 的编码坑
Jan 23 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
Feb 20 Javascript
mac上node.js环境的安装测试
Jul 03 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
Feb 22 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
May 05 Javascript
小程序实现层叠卡片滑动效果
Aug 26 Javascript
vue实现数据控制视图的原理解析
Jan 07 Javascript
js实现ajax的用户简单登入功能
Jun 18 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
【星际争霸1】人族1v7家ZBath
2020/03/04 星际争霸
自己做矿石收音机
2021/03/02 无线电
php 三元运算符实例详细介绍
2016/12/15 PHP
php提取微信账单的有效信息
2018/10/01 PHP
YII框架http缓存操作示例
2019/04/29 PHP
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
2009/11/12 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
2013/03/05 Javascript
JS中showModalDialog 的使用解析
2013/04/17 Javascript
JavaScript将页面表格导出为Excel的具体实现
2013/12/27 Javascript
浅谈JavaScript Array对象
2014/12/29 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
JavaScript去除数组里重复值的方法
2015/07/13 Javascript
AngularJS入门示例之Hello World详解
2017/01/04 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
2017/01/11 Javascript
js上下视差滚动简单实现代码
2017/03/07 Javascript
关于Ajax的原理以及代码封装详解
2017/09/08 Javascript
NodeJs实现简单的爬虫功能案例分析
2018/12/05 NodeJs
微信小程序实现同时上传多张图片
2020/02/03 Javascript
[49:15]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第二场 1月19日
2021/03/11 DOTA
python实现telnet客户端的方法
2015/04/15 Python
Windows下安装python MySQLdb遇到的问题及解决方法
2017/03/16 Python
Python单体模式的几种常见实现方法详解
2017/07/28 Python
windows下python之mysqldb模块安装方法
2017/09/07 Python
django项目用higcharts统计最近七天文章点击量
2019/08/17 Python
基于Python的Jenkins的二次开发操作
2020/05/12 Python
详解python如何引用包package
2020/06/07 Python
python 多线程共享全局变量的优劣
2020/09/24 Python
python实现代码审查自动回复消息
2021/02/01 Python
Priority Pass机场贵宾室会籍计划:全球超过1200间机场贵宾室
2018/08/26 全球购物
上海奥佳笔试题面试题
2016/11/16 面试题
教师政风行风自查自纠报告
2014/10/21 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书
简短的36句中秋节祝福信息语句
2019/09/09 职场文书
Pytorch中的数据集划分&正则化方法
2021/05/27 Python
死磕 java同步系列之synchronized解析
2021/06/28 Java/Android
Mybatis-plus在项目中的简单应用
2021/07/01 Java/Android