频道导航

Angular4_checkbox双向绑定

2020-04-24 Angularjs 前端之家

前端之家收集整理的这篇文章主要介绍了Angular4_checkbox双向绑定，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

 
  @H_404_2@ 
   < 
   td 
   >< 
   input 
   type= 
   "text" # 
   Box [ 
   ngClass]= 
   "{'confirmBox': classFlag,'confirmBoxError': !classFlag}" [( 
   ngModel)]= 
   "confirmMaterial" 
  
 
  @H_404_2@
    ( 
   paste)= 
   "inputpaste($event)" ( 
   keyup. 
   enter)= 
   "checkscan(Box.value)"placeholder= 
   "Scan Material" ( 
   ngModelChange)= 
   "scanClass(Box.value)"

@H_404_2@ /></ td >

上面是一个输入框。触发粘贴事件之后。对应的行会选中

 
 < 
 td 
 >< 
 input 
 type= 
 "checkBox" ( 
 click)= 
 "setRowEditAble(item)" [( 
 ngModel)]= 
 "item.checked" 
 /></ 
 td 
 > 

 
 @H_404_2@ 
  inputpaste(e 
  : 
  any) { 
 

@H_404_2@ const value = e. clipboardData. getData( 'text/plain');

@H_404_2@ this. matchMaterial( value);

@H_404_2@ }

@H_404_2@ matchMaterial(value : string) {

@H_404_2@ if ( this. handlingUnitMaterials) { @H_404_2@ this. handlingUnitMaterials. forEach((item : any) => { @H_404_2@ if ( item. material === value) { @H_404_2@ console. log( item); @H_404_2@ item.checked = true; @H_404_2@ this. setRowEditAble( item); @H_404_2@ // item.disableRemovedQty = false; @H_404_2@ // item.disableReason = false; @H_404_2@ this. clearSearch(); @H_404_2@ } @H_404_2@ }) @H_404_2@ } @H_404_2@ }

 
 @H_404_2@ 
  setRowEditAble(item 
  : 
  any) {

@H_404_2@ if ( item) { @H_404_2@ // console.log(item); @H_404_2@ item. disableRemovedQty = ! item. disableRemovedQty; @H_404_2@ item. disableReason = ! item. disableReason; @H_404_2@ if ( item. disableRemovedQty) { @H_404_2@ item. removedQty = 0; @H_404_2@ } else { @H_404_2@ item. removedQtyInvalid = true; @H_404_2@ } @H_404_2@ if ( item. disableReason) { @H_404_2@ item. reason = ''; @H_404_2@ item. removedQtyInvalid = false; @H_404_2@ } @H_404_2@ } @H_404_2@ }