javascript - 如何在从 Angular 多选删除值之前放置 JavaScript 警报提示

标签 javascript angular multi-select

在使用 Angular2-multiselect 从列表中删除值之前,我需要发出一个警报提示。我在下面解释我的代码。

<div class="form-field">
   <angular2-multiselect [data]="searchCoupon" #ProductCoupon formControlName="couponValues" [settings]="settings">
       <c-search>
           <ng-template>
                <input type="text" (keyup)="onCouponSearch($event)" placeholder="Search coupons" style="border: none;width: 100%; height: 100%;outline: none;"/>
           </ng-template>
      </c-search>
       <c-item>
          <ng-template let-item="item">
               <label style="color: #333;">{{item.CouponCode}}</label>
          </ng-template>
       </c-item>
       <c-badge>
          <ng-template let-item="item">
             <label style="margin: 0px;">{{item.CouponCode}}</label>
              <mat-icon matSuffix  (click)="editCoupon(item._id,true)" style="font-size: 17px;width: 15px;padding-left:5px;color:white">edit</mat-icon>
         </ng-template>
     </c-badge>  
     </angular2-multiselect>
</div>

这里我使用Angular-multiselect通过搜索从列表中选择多个项目,这部分工作正常。在这里,我需要当用户删除任何选定的项目时,如果用户单击“确定”按钮,则首先显示一个 JavaScript 警报提示,然后选定的项目将被删除,否则不会从列表中删除。

最佳答案

为了实现此目的,您需要使用confirm(args),当用户单击“确定”时,它返回一个boolean true,如果用户单击“取消”,则返回 false。

你可以像这样使用它,

const isOkDelete: boolean = confirm('Are you sure you want to remove this item?');

if (isOkDelete) {
   // delete this item...
} else {
   // do not delete this item...
}

引用https://www.w3schools.com/jsref/met_win_confirm.asp了解更多信息。

关于javascript - 如何在从 Angular 多选删除值之前放置 JavaScript 警报提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60538649/

相关文章:

html - 有没有办法将多选列表框显示为组合框(单选)但在打开时应该给出多选

javascript - 从谷歌地理编码结果中删除奇怪的日文字符

javascript - 使用 JavaScript 规则和消息检查是否至少选中了 1 个复选框

javascript - 如何在 Atom 中启动 javascript 项目?或者任何其他IDE?

javascript - 使用具有 6 段的路径创建 SVG 圆

javascript - jQuery 多选只是为了从一个选择框复制到另一个选择框

javascript - aikau MultiSelectInput 是否支持多个值?

javascript - IE7 中的 jQuery 属性

javascript - 需要使用 css Appearance 属性将复选框转换为单选按钮

javascript - 如何从 AgEditorComponent 的上下文中聚焦 ag-grid Angular 中的下一个单元格