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 相关文章推荐
jQuery自动切换/点击切换选项卡效果的小例子
Aug 12 Javascript
jquery 实现窗口的最大化不论什么情况
Sep 03 Javascript
下拉列表select 由左边框移动到右边示例
Dec 04 Javascript
如何获取网站icon有哪些可行的方法
Jun 05 Javascript
JavaScript获取页面上被选中文字的方法技巧
Mar 13 Javascript
学习JavaScript设计模式(继承)
Nov 26 Javascript
angular route中使用resolve在uglify压缩后问题解决
Sep 21 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
Dec 09 Javascript
微信小程序基于本地缓存实现点赞功能的方法
Dec 18 Javascript
react中Suspense的使用详解
Sep 01 Javascript
jQuery实现移动端扭蛋机抽奖
Nov 08 jQuery
JS相册图片抖动放大展示效果的示例代码
Jan 29 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学习之整理字符串
2011/04/17 PHP
ThinkPHP关联模型操作实例分析
2012/09/23 PHP
访问编码后的中文URL返回404错误的解决方法
2014/08/20 PHP
Linux系统下php获得系统分区信息的方法
2015/03/30 PHP
thinkPHP中验证码的简单实现方法
2016/12/05 PHP
Yii2框架类自动加载机制实例分析
2018/05/02 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
php依赖注入知识点详解
2019/09/23 PHP
Chrome中JSON.parse的特殊实现
2011/01/12 Javascript
js判断上传文件的类型和大小示例代码
2013/10/18 Javascript
js处理php输出时间戳对不上号的解决方法
2014/06/20 Javascript
javascript发送短信验证码实现代码
2015/11/12 Javascript
20分钟打造属于你的Bootstrap站点
2016/07/27 Javascript
jQuery包裹节点用法完整示例
2016/09/13 Javascript
jquery.zclip轻量级复制失效问题
2017/01/08 Javascript
Javascript中构造函数要注意的一些坑
2017/01/23 Javascript
Javascript for in的缺陷总结
2017/02/03 Javascript
打造通用的匀速运动框架(实例讲解)
2017/10/17 Javascript
vue组件发布到npm简单步骤
2017/11/30 Javascript
微信小程序实现tab左右切换效果
2020/11/15 Javascript
Vue-CLI项目中路由传参的方式详解
2019/09/01 Javascript
JsonProperty 的使用方法详解
2019/10/11 Javascript
浅谈Vue中render中的h箭头函数
2019/11/07 Javascript
JavaScript多种滤镜算法实现代码实例
2019/12/10 Javascript
node.JS路径解析之PATH模块使用方法详解
2020/02/06 Javascript
JavaScript实现随机点名程序
2020/03/25 Javascript
Python中使用ElementTree解析XML示例
2015/06/02 Python
python3利用Dlib19.7实现人脸68个特征点标定
2018/02/26 Python
Python中函数参数调用方式分析
2018/08/09 Python
Python facenet进行人脸识别测试过程解析
2019/08/16 Python
使用python实现离散时间傅里叶变换的方法
2019/09/02 Python
python如何运行js语句
2020/09/09 Python
Java语言的优势
2015/01/10 面试题
毕业生自荐信范文
2015/03/05 职场文书
结婚司仪主持词
2015/06/29 职场文书
详解TS数字分隔符和更严格的类属性检查
2021/05/06 Javascript