angular2.x 多选框事件

angular2.x - 4.x  的多选框事件

ng2 -- ng4 反正都是用es6 都统称为2.x吧。

下面贴代码

html界面

<table>
            <tbody>
                <tr *ngFor="let item of itemList">
                    <td>
                        <input type="checkbox" [checked]="isCheck(item)" (click)="clickItem($event,item)" />
                    </td>
                    <td>{{ item }}</td>
                </tr>
            </tbody>
        </table>

ts代码:

import { Component, OnInit } from ‘@angular/core‘;
import { RankingService } from ‘../ranking/services/ranking.service‘;

@Component({
  selector: ‘app-classify‘,
  templateUrl: ‘./classify.component.html‘,
  styleUrls: [‘./classify.component.css‘]
})
export class ClassifyComponent implements OnInit {

      public itemList: Array<any>;
    public selected : Array<any>;
      constructor() {
      this.itemList = [1,2,3,4];
      this.selected = [];
      }
    ngOnInit() {}
      //   点击时执行
    clickItem(e,item) {
      var checkbox = e.target;
      var action = (checkbox.checked ? ‘add‘ : ‘remove‘);
      this.updateSelected(action, item);
    }
    // 用来判断input 的checked
    isCheck(item) {
      return this.selected.findIndex(value => value == item) > 0;
    }
    //  执行增加、删除
    private updateSelected(action, item) {
            console.log(‘判断‘+action);
            console.log(‘判断item=‘+item);
          if (action == ‘add‘ && this.selected.findIndex(value => value == item) == -1){
            console.log(‘执行添加‘)
            this.selected.push(item);
          }
          if (action == ‘remove‘ && this.selected.findIndex(value => value == item) != -1){
            console.log(‘执行删除‘);
            this.selected.splice(this.selected.findIndex(value => value == item), 1);
          }
      console.log(this.selected)
    }
}

界面效果

添加

删除

最近才刚刚开始接触ng2 ,每天进步一点点,总有一天我也会很6的。

时间: 2024-10-26 07:06:15

angular2.x 多选框事件的相关文章

echarts区域统计取消选框事件

1.情景再现:对图表进行区域选择,弹出一个数据弹框,然后此时想通过点击区域统计弹出框的叉号关闭弹窗,同时区域选择框也随着消失.如下图: //触发图表的区域选择功能 chart.on('brushselected',function(params){ //区域选择弹出框代码此处忽略... //点击弹出框关闭按钮同时区域选择框跟着消失: $('.areaCountTR').on('click',function(){ //触发图表行为函数 chart.dispatchAction({ type: '

关于复选框和单选框的事

很多时候我想会用到浏览器默认的单选按钮或者复选框,比如说偷懒的时候或者心情不好的时候╮(╯﹏╰)╭, 在html结构里我想实现点击文字旁边的单选按钮就跟着选中或反之,像这样: html代码就可以这样写了:<label><input type="radio" />javascript</label>,通过label标签自动关联这个事件. 那么问题来了,如果是多个选项,我想点击其中的某个选项,其他的就默认不选中,该怎么写,复制上面的代码黏贴几行改了文字就

ztree点击节点实现选中/取消复选框

效果 代码 在js中初始化tree时 设置复选框操作只影响子节点 复选框事件,想怎么处理就怎么处理 原文地址:https://www.cnblogs.com/xiaostudy/p/10886412.html

easyui 复选框 onClickRow事件与onSelect事件与onCheck事件

在项目中一直存在一个问题,一直都没发现问题的根源在哪里.在我们测试这边也是偶尔会出现.但是每次我去测试的时候也没问题.今天终于找到原因了! 在easyui中点击行和点击复选框触发的事件是不一样的! 点击行触发的事件 项目中部分代码:: onClickRow:function(index, row){ hospnewId=row.id; hosName=row.name; } 当我点击复选框的时候就不会触发这个事件,所以就得不到我想要的值. 看了一下easyui的api,发现有两个事件(可以满足我

复选框 省市区 联动(监听input的change事件)

需求:省市区三级包含复选框按钮以及文字描述.点击文字显示对应的下级地区,点击复选框选择对应的下级区域勾选. 分析:监听input的change事件当点击复选框省  选择对应的第一个市区,同时默认选中第三级区域的第一个.同理监听span或者label(因为label与input的搭配使用) 辅助:后台提供省市区的数据: 两种方式: A:后台直接给dom结构(后台写好基本构架,前段自己在后台code填写需要的dom,class,方便前端开发) B:后台直接给前段一个json数据,前段自己遍历.(和后

jquery点击复选框触发事件给input赋值

体验效果:http://keleyi.com/keleyi/phtml/jqtexiao/31.htm 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery点击复选框触发事件给input赋值-柯乐义</title><base target="_blank" /> <sty

angular2.x 下拉多选框选择组件

angular2.x - 5.x 的下拉多选框选择组件 ng2 -- ng5.最近在学angular4,经常在交流群看见很多人问 下拉多选怎么做... 今天就随便写的个. 组件源码 百度云   链接:https://pan.baidu.com/s/1dEHwKmt 密码: mhta 下面贴代码: 界面 引用  selectList  是 下拉框的数据列表 redSelList() 方法是获取 选择完成后的数据 <app-select-checkbox [itemList]="selectL

checkbox复选框和div click事件重叠,点击div后复选框也被选中,同时改变div颜色,否则则不选中

 checkbox复选框和div click事件重叠,点击div后复选框也被选中,同时改变div颜色,否则则不选中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div { display: inline-block; width: 100px; margi

复选框 checkbox 选中事件

项目中用的jquery-1.11 今天需要检测一个checkbox的选中状态,想当然的用 .attr("checked") ,结果发现,无论是否选中,这个值都是 undefined 未定义. 折腾了半天,发现:As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. In addition, .attr() should not be used on pla