码迷,mamicode.com
首页 > 其他好文 > 详细

angular2.x 多选框事件

时间:2017-06-21 13:43:55      阅读:127      评论:0      收藏:0      [点我收藏+]

标签:2.x   import   style   es6   []   htm   upd   url   ted   

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的。

 

angular2.x 多选框事件

标签:2.x   import   style   es6   []   htm   upd   url   ted   

原文地址:http://www.cnblogs.com/huaji666/p/7058707.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!