Angular4中的checkbox?全選按鈕啟用禁用
更新時間:2023年03月06日 08:20:35 作者:Hello_Martin
這篇文章主要介紹了Angular4中的checkbox?全選按鈕啟用禁用的相關(guān)資料,需要的朋友可以參考下
這客戶比較特殊,啥都得選中行能選中checkbox,并且未選中時按鈕需要禁用。 可以理解
代碼比較簡單,table代碼:
<div class="modal-header"> <p class="modal-title">Logout Warnning</p> </div> <div class="modal-body"> <p>Your have working order(s). if you logout the order(s) will be returned to the Pick Queue and all unconfirmed handling units will remove. Do you want to continue logout"table"> <thead> <tr> <th> <input type="checkbox" name="checkedAll" [checked]="isAllChecked()" (change)="checkAll($event)"> </th> <th>Phase Code</th> <th>Delivery</th> <th>Product</th> </tr> </thead> <tbody> <tr *ngFor="let task of this.releaseTasks.releaseTaskDetails index as i;"(click)="onModalSelectedRows(task)" > <td> <input type="checkbox" [(ngModel)]="task.isChecked" name="checkedTask{{i}}" #checkedTask="ngModel"/> </td> <td> {{task.phaseCode}} </td> <td> {{task.saP_DeliveryOrder_ID}} </td> <td> {{task.saP_ProductOrder_ID|removeLeadingZeros}} </td> </tr> </tbody> </table> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" (click)="c('Yes')" [disabled]="!canRelease">Release and logout</button> <button type="button" class="btn btn-primary" (click)="c('No')">Logout only</button> </div>
??checkAll(ev: any) {?? ??this.releaseTasks.releaseTaskDetails.forEach((x:any) => x.isChecked = ev.target.checked)?? ?? }?? ??isAllChecked() {?? ??if(this.releaseTasks.releaseTaskDetails.length > 0?? ??return this.canRelease = this.releaseTasks.releaseTaskDetails.every((_:any) => _.isChecked);?? ?? }?? ??return false;?? ?? }?? ?????? onModalSelectedRows(task : any) { task. isChecked = ! task. isChecked; let len = 0; this. releaseTasks. releaseTaskDetails. forEach((item : any) => if( item. isChecked) { len ++; } }); if( len === 0) { this. canRelease = false; else{ this. canRelease = true; } } ????后臺的viewmodel代碼??
Controller 代碼
var activityQuery = from op in _context.OperatorActivities where op.Operator_ID == userName && !op.IsComplete && !op.IsReleased && !op.IsException select op; ReleaseTask relesaseTask = new ReleaseTask(); if(activityQuery.Any()){ foreach (var activity in activityQuery) { ReleaseTaskViewModel taskDetail = new ReleaseTaskViewModel(); taskDetail.SAP_DeliveryOrder_ID = getOrderById(activity.DeliveryOrder_ID); taskDetail.SAP_ProductOrder_ID = getProductOrderById(activity.ProductionOrder_ID); taskDetail.PhaseCode = activity.ActivityCode; taskDetail.isChecked = true; taskDetail.OperatorActivityId = activity.OperatorActivity_ID; taskDetail.DeliveryOrder_ID = activity.DeliveryOrder_ID; taskDetail.ProductionOrder_ID = activity.ProductionOrder_ID; taskDetail.Operator_ID = activity.Operator_ID; taskDetail.OrderId = activity.ActivityCode == "MAKE" ? activity.ProductionOrder_ID : activity.DeliveryOrder_ID; taskDetail.isPersistent = isPersistent(activity.ProductionOrder_ID); if(!taskDetail.isPersistent) { relesaseTask.ReleaseTaskDetails.Add(taskDetail); } } } return(Ok(new { success = true, data = relesaseTask}));
到此這篇關(guān)于Angular4中的checkbox 全選按鈕啟用禁用的文章就介紹到這了,更多相關(guān)Angularjs實現(xiàn)checkbox 全選內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
后端接收不到AngularJs中$http.post發(fā)送的數(shù)據(jù)原因分析及解決辦法
這篇文章主要介紹了后端接收不到AngularJs中$http.post發(fā)送的數(shù)據(jù)原因分析及解決辦法的相關(guān)資料,需要的朋友可以參考下2016-07-07關(guān)于angularJs指令的Scope(作用域)介紹
下面小編就為大家?guī)硪黄猘ngularJs指令的Scope(作用域)介紹。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10angular6的table組件開發(fā)的實現(xiàn)示例
這篇文章主要介紹了angular6的table組件開發(fā)的實現(xiàn)示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-12-12