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中的一些注意事项 更新中
Dec 06 Javascript
jquery.validate分组验证代码
Mar 17 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
Feb 02 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
Apr 08 Javascript
js下将金额数字每三位一逗号分隔
Feb 19 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
May 10 Javascript
JS 拼凑字符串的简单实例
Sep 02 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
Aug 17 Javascript
vue动态设置img的src路径实例
Sep 18 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
Apr 04 Javascript
OpenLayers3实现鼠标移动显示坐标
Sep 25 Javascript
Vue+Flask实现图片传输功能
Apr 01 Vue.js
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之第五天
2006/10/09 PHP
PHP4实际应用经验篇(4)
2006/10/09 PHP
php学习 函数 课件
2008/06/15 PHP
PHP array_multisort()函数的使用札记
2011/07/03 PHP
PHP笔记之:基于面向对象设计的详解
2013/05/14 PHP
php统计数组元素个数的方法
2015/07/02 PHP
js 剪切板应用clipboardData详细解析
2013/12/17 Javascript
jquery中push()的用法(数组添加元素)
2014/11/25 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
2016/06/20 Javascript
浅析Javascript的自动分号插入(ASI)机制
2016/09/29 Javascript
微信小程序 数据遍历的实现
2017/04/05 Javascript
javascript实现5秒倒计时并跳转功能
2019/06/20 Javascript
五分钟搞懂Vuex实用知识(小结)
2019/08/12 Javascript
vue data恢复初始化数据的实现方法
2019/10/31 Javascript
JavaScript对象属性操作实例解析
2020/02/04 Javascript
在vue项目实现一个ctrl+f的搜索功能
2020/02/28 Javascript
Javascript模块化机制实现原理详解
2020/04/02 Javascript
Python中的高级数据结构详解
2015/03/27 Python
python记录程序运行时间的三种方法
2017/07/14 Python
django上传图片并生成缩略图方法示例
2017/12/11 Python
python 3.5实现检测路由器流量并写入txt的方法实例
2017/12/17 Python
TensorFlow用expand_dim()来增加维度的方法
2018/07/26 Python
python递归函数求n的阶乘,优缺点及递归次数设置方式
2020/04/02 Python
在django中form的label和verbose name的区别说明
2020/05/20 Python
Python eval函数介绍及用法
2020/11/09 Python
pycharm激活码2020最新分享适用pycharm2020最新版亲测可用
2020/11/22 Python
详解Python中openpyxl模块基本用法
2021/02/23 Python
关于HTML5你必须知道的28个新特性,新技巧以及新技术
2012/05/28 HTML / CSS
英国音乐设备和乐器商店:Gear4music
2017/10/16 全球购物
php优化查询foreach代码实例讲解
2021/03/24 PHP
桥梁与隧道工程专业本科生求职信
2013/10/08 职场文书
家居设计专业个人自荐信范文
2013/11/26 职场文书
技术经理的自我评价范文
2013/12/03 职场文书
给学校的建议书400字
2015/09/14 职场文书
如何搭建 MySQL 高可用高性能集群
2021/06/21 MySQL
MySQL示例讲解数据库约束以及表的设计
2022/06/16 MySQL