Typescript如何将复选框的click事件更改为另一个处理程序

时间:2017-07-25 06:03:23

标签: angular typescript

假设我有一个两个div,左边div包含带复选框的所有项目,右边一个是空的,但是点击左边div的每个项目的加号按钮我有一个点击处理程序从左边删除所选项目div,并更改该元素的一些属性并添加右div,现在与其他属性一起我应该将右div的添加项的click事件更改为另一个处理程序: enter image description here

带有加号图标的左侧项目的点击事件被映射到名为(click)='addItem($event)'的函数,在此函数中我从左侧div中删除目标元素,并更改某些属性,如checked=true, and fa-plus to fa-minus,但我需要将其单击处理程序更改为另一个函数removeItem($event)。 我试过的:

 addItem(itemId) {
    const element = <HTMLInputElement> document.getElementById(itemId);
    element.checked = true;
    const itemsWrapper = <HTMLInputElement> 
    document.getElementById('item4select');
    const selectedItemWrapper = <HTMLInputElement> document.getElementById('selectedItems');
    const selectedItem = itemsWrapper.querySelector('li[data="'+itemId+'"]');

    itemsWrapper.removeChild(selectedItem);

    selectedItem.setAttribute('data', 'sel_'+itemId)
    selectedItem.querySelector('input[type="checkbox"]').setAttribute('id', 'sel_'+itemId);
    // Bellow two line are for changing click event.
    //selectedItem.querySelector('input[type="checkbox"]').click = 'removeMe($event)';

  //selectedItem.querySelector('input[type="checkbox"]').setAttribute('click', 'removeMe($event)');

selectedItem.querySelector('span[refLabel="addItemBtn"]').classList.remove('fa-plus');
  selectedItem.querySelector('span[refLabel="addItemBtn"]').classList.add('fa-minus');
selectedItemWrapper.appendChild(selectedItem);
this.checkAllOfSelectedItemsChecked = true;
this.checkAllOfSelectedItemsClass = 'fa-check-square';

}

0 个答案:

没有答案
相关问题