Angular.JS判断复选框checkbox是否选中并实时显示


Posted in Javascript onNovember 30, 2016

首先来看看简单的效果图,如下所示:

Angular.JS判断复选框checkbox是否选中并实时显示

看一下html代码:

<!DOCTYPE html>
<html data-ng-app="App">
<head>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
 <script src="script2.js"></script>
</head>
<body data-ng-controller="AddStyleCtrl">

 <div>Choose Tags</div> 
 <div>
  <div>You have choosen:</div>
  <hr>
  <label data-ng-repeat="selectedTag in selectedTags">
   (({{selectedTag}}))
  </label>
  <hr>
  <div data-ng-repeat="category in tagcategories">
   <div>{{ category.name }}</div>
   <div data-ng-repeat="tag in category.tags">
    <div>
     <input type="checkbox" id={{tag.id}} name="{{tag.name}}" ng-checked="isSelected(tag.id)" ng-click="updateSelection($event,tag.id)">
     {{ tag.name }}
    </div>
   </div>
   <hr>
  </div>
 </div>

<pre>{{selected|json}}</pre>
<pre>{{selectedTags|json}}</pre>

</body>
</html>

line2 定义了AngularJS App;

line4 引入angularjs脚本;

line5 引入自己写的script2.js脚本;

line7 指定控制器AddStyleCtrl

line13-15 实时显示已选标签给用户看;

line17-line26 使用双重循环列出数据库(本例中就存储在了controller的一个对象里)中的数据;

line21的这行代码作用可大了:<input type="checkbox" id={{tag.id}} name="{{tag.name}}" ng-checked="isSelected(tag.id)" ng-click="updateSelection($event,tag.id)">

存储了tag的id,name,利用isSelected(tag.id)来判断是否被checked,点击时候调用updateSelection($event,tag.id)方法;

如果想 ng-click 触发的函数里获取到该触发该函数的元素不能直接传入 this ,而需要传入 event。因为在Angularjs里面,这个地方的this是event。因为在Angularjs里面,这个地方的this是scope 。我们可以传入 event,然后在函数里面通过event,然后在函数里面通过event.target 来获取到该元素。

line29-30 是测试时候给自己看的,可以看到selected数组和selectedTags数组中的内容;

然后看看AngularJS代码:(script2.js)

/**
 * Created by zh on 20/05/15.
 */
// Code goes here

var iApp = angular.module("App", []);



iApp.controller('AddStyleCtrl', function($scope)
{
 $scope.tagcategories = [
  {
   id: 1,
   name: 'Color',
   tags: [
    {
     id:1,
     name:'color1'
    },
    {
     id:2,
     name:'color2'
    },
    {
     id:3,
     name:'color3'
    },
    {
     id:4,
     name:'color4'
    },
   ]
  },
  {
   id:2,
   name:'Cat',
   tags:[
    {
     id:5,
     name:'cat1'
    },
    {
     id:6,
     name:'cat2'
    },
   ]
  },
  {
   id:3,
   name:'Scenario',
   tags:[
    {
     id:7,
     name:'Home'
    },
    {
     id:8,
     name:'Work'
    },
   ]
  }
 ];

 $scope.selected = [];
 $scope.selectedTags = [];

 var updateSelected = function(action,id,name){
  if(action == 'add' && $scope.selected.indexOf(id) == -1){
   $scope.selected.push(id);
   $scope.selectedTags.push(name);
  }
  if(action == 'remove' && $scope.selected.indexOf(id)!=-1){
   var idx = $scope.selected.indexOf(id);
   $scope.selected.splice(idx,1);
   $scope.selectedTags.splice(idx,1);
  }
 }

 $scope.updateSelection = function($event, id){
  var checkbox = $event.target;
  var action = (checkbox.checked?'add':'remove');
  updateSelected(action,id,checkbox.name);
 }

 $scope.isSelected = function(id){
  return $scope.selected.indexOf(id)>=0;
 }
});

line6 定义了angular app;

line10 定义了控制器AddStyleCtrl;

line12-63 定义了 标签对象

line64,66 声明了$scope中的两个数组对象(可以合并为1个),分别用来存储tag的id和name;

line68-78 定义了updateSelected方法,这个方法会被updateSelection调用;

line69-72:如果add操作且 ‘数组[id]' 元素不存在,向数组中添加数据(id,name);

line73-77:如果remove操作且‘数组[id]' 元素存在,从数组中删除数据(id,name);

line80-84定义了updateSelection方法,这个方法会在html页面的checkbox被点击时调用;

line81通过$event变量来获取点击的dom元素;

line82通过checkbox的当前状态来决定是add操作还是remove操作;

line83调用updateSelected方法,更新数据;

line86-88定义了isSelected方法,用来判断ID为id的checkbox是否被选中,然后传值给页面的ng-checked指令;

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问欢迎大家留言交流。

作者: ZH奶酪——张贺
Q Q: 1203456195
邮箱: cheesezh@163.com
出处: >http://www.cnblogs.com/CheeseZH/

Javascript 相关文章推荐
javascript的键盘控制事件说明
Apr 15 Javascript
javascript JSON操作入门实例
Apr 16 Javascript
在Html中使用Requirejs进行模块化开发实例详解
Apr 15 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
Oct 15 Javascript
ES6中Math对象新增的方法实例详解
Apr 25 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
Apr 26 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
May 21 Javascript
js中的this的指向问题详解
Aug 29 Javascript
微信小程序sessionid不一致问题解决
Aug 30 Javascript
简单了解前端渐进式框架VUE
Jul 20 Javascript
vue 实现tab切换保持数据状态
Jul 21 Javascript
浅谈Vue static 静态资源路径 和 style问题
Nov 07 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
Nov 30 #Javascript
浅析JavaScript中break、continue和return的区别
Nov 30 #Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
Nov 30 #Javascript
浅析script标签中的defer与async属性
Nov 30 #Javascript
JavaScript 字符串常用操作小结(非常实用)
Nov 30 #Javascript
js实现表单提交后不重新刷新当前页面
Nov 30 #Javascript
html判断当前页面是否在iframe中的实例
Nov 30 #Javascript
You might like
PHP.MVC的模板标签系统(三)
2006/09/05 PHP
Thinkphp中数据按分类嵌套循环实现方法
2014/10/30 PHP
PHP往XML中添加节点的方法
2015/03/12 PHP
PHP 微信扫码支付源代码(推荐)
2016/11/03 PHP
浅析php如何实现爬取数据原理
2018/09/27 PHP
ThinkPHP5.1表单令牌Token失效问题的解决
2019/03/22 PHP
PHP基于swoole多进程操作示例
2019/08/12 PHP
摘自启点的main.js
2008/04/20 Javascript
js中事件的处理与浏览器对象示例介绍
2013/11/29 Javascript
jquery $(&quot;#variable&quot;) 循环改变variable的值示例
2014/02/23 Javascript
JS实现超炫网页烟花动画效果的方法
2015/03/02 Javascript
jquery UI Datepicker时间控件的使用及问题解决
2016/04/28 Javascript
js简单实现图片延迟加载的方法
2016/07/19 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
2017/03/10 Javascript
JavaScript实现短信倒计时60s
2017/10/09 Javascript
JS计算距当前时间的时间差实例
2017/12/29 Javascript
微信小程序中遇到的iOS兼容性问题小结
2018/11/14 Javascript
小程序登录之支付宝授权的实现示例
2019/12/13 Javascript
[01:05:56]Liquid vs VP Supermajor决赛 BO 第二场 6.10
2018/07/04 DOTA
分享vim python缩进等一些配置
2018/07/02 Python
Python使用POP3和SMTP协议收发邮件的示例代码
2019/04/16 Python
PyCharm+Pipenv虚拟环境开发和依赖管理的教程详解
2020/04/16 Python
python+django+selenium搭建简易自动化测试
2020/08/19 Python
Pandas对每个分组应用apply函数的实现
2020/12/13 Python
Html5 postMessage实现跨域消息传递
2016/03/11 HTML / CSS
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
2014/05/08 HTML / CSS
医学毕业生自我鉴定
2013/10/30 职场文书
质量月活动策划方案
2014/03/10 职场文书
承诺书怎么写
2014/03/26 职场文书
无财产无子女离婚协议书范文
2014/09/14 职场文书
党支部班子“四风”问题自我剖析材料
2014/09/28 职场文书
2014入党积极分子批评与自我批评思想报告
2014/10/06 职场文书
2015年宣传部工作总结范文
2015/03/31 职场文书
国家助学贷款承诺书
2015/04/30 职场文书
幼儿园中班教学反思
2016/03/03 职场文书
MongoDB数据库部署环境准备及使用介绍
2022/03/21 MongoDB