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 相关文章推荐
safari,opera嵌入iframe页面cookie读取问题解决方法
Jun 23 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
Sep 05 Javascript
Ajax搜索结果页面下方的分页按钮的生成
Apr 05 Javascript
jquery实现弹出层效果实例
May 19 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
Feb 16 Javascript
Vue数据驱动模拟实现1
Jan 11 Javascript
vue-router路由参数刷新消失的问题解决方法
Jun 17 Javascript
webpack多入口文件页面打包配置详解
Jan 09 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
Apr 10 Javascript
jQuery实现简单聊天室
Feb 08 jQuery
Nuxt.js nuxt-link与router-link的区别说明
Nov 06 Javascript
详解nginx配置vue h5 history去除#号
Nov 09 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 常用字符串函数总结
2008/03/15 PHP
php获取某个目录大小的代码
2008/09/10 PHP
简单的php 验证图片生成函数
2009/05/21 PHP
js登录弹出层特效
2014/03/07 Javascript
jQuery简单几行代码实现tab切换
2015/03/10 Javascript
nodejs中实现阻塞实例
2015/03/24 NodeJs
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
2016/08/23 Javascript
AngularJS 实现弹性盒子布局的方法
2016/08/30 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
2016/12/26 Javascript
VUE开发一个图片轮播的组件示例代码
2017/03/06 Javascript
Nodejs回调加超时限制两种实现方法
2017/06/09 NodeJs
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
2017/07/27 Javascript
angularJs中ng-model-options设置数据同步的方法
2018/09/30 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
2019/12/17 Javascript
Angular如何由模板生成DOM树的方法
2019/12/23 Javascript
解决新建一个vue项目过程中遇到的问题
2020/10/22 Javascript
Python代理抓取并验证使用多线程实现
2013/05/03 Python
python使用scrapy解析js示例
2014/01/23 Python
Python实现自定义顺序、排列写入数据到Excel的方法
2018/04/23 Python
python常用函数与用法示例
2019/07/02 Python
python 代码实现k-means聚类分析的思路(不使用现成聚类库)
2020/06/01 Python
HTML5 Video标签的属性、方法和事件汇总介绍
2015/04/24 HTML / CSS
main 函数执行以前,还会执行什么代码
2013/04/17 面试题
酒店管理专业学生求职信
2013/09/27 职场文书
外语专业毕业生个人的自荐信
2013/11/19 职场文书
触摸春天教学反思
2014/02/03 职场文书
中文专业学生自我评价范文
2014/02/06 职场文书
2014年消防工作实施方案
2014/02/20 职场文书
青春励志演讲稿范文
2014/08/25 职场文书
商务英语专业大学生职业生涯规划书
2014/09/14 职场文书
依法行政工作汇报材料
2014/10/28 职场文书
2014年前台接待工作总结
2014/12/05 职场文书
2014年街道办事处工作总结
2014/12/11 职场文书
Pandas搭配lambda组合使用详解
2022/01/22 Python
MySQ InnoDB和MyISAM存储引擎介绍
2022/04/26 MySQL
table不让td文字溢出操作方法
2022/12/24 HTML / CSS