Angular4中的checkbox 全选按钮启用禁用

 更新时间:2023年03月06日 08:20:35   作者:Hello_Martin  
这篇文章主要介绍了Angular4中的checkbox 全选按钮启用禁用的相关资料,需要的朋友可以参考下

Angular4_table中的checkbox 全选,按钮启用禁用_SAP

这客户比较特殊,啥都得选中行能选中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}));

到此这篇关于Angular4中的checkbox 全选按钮启用禁用的文章就介绍到这了,更多相关Angularjs实现checkbox 全选内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)

    浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)

    今天小编就为大家分享一篇浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10
  • 详解AngularJS验证、过滤器、指令

    详解AngularJS验证、过滤器、指令

    这篇文章主要介绍了AngularJS验证、过滤器、指令的相关知识,angularJS中提供了许多的验证指令,可以轻松的实现验证,具体详情大家通过本文一起学习吧,需要的朋友可以参考下
    2017-01-01
  • AngularJS中过滤器的使用与自定义实例代码

    AngularJS中过滤器的使用与自定义实例代码

    这篇文章运用实例代码给大家介绍了angularjs中过滤器的使用和自定义过滤器,对大家学习AngularJS具有一定的参考借鉴价值,感兴趣的朋友们可以参考借鉴。
    2016-09-09
  • NodeJs——入门必看攻略

    NodeJs——入门必看攻略

    下面小编就为大家带来一篇NodeJs——入门必看攻略。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • angularjs的select使用及默认选中设置

    angularjs的select使用及默认选中设置

    本篇文章主要介绍了angularjs的select使用及默认选中设置,非常具有实用价值,需要的朋友可以参考下
    2017-04-04
  • AngularJS集合数据遍历显示的实例

    AngularJS集合数据遍历显示的实例

    下面小编就为大家分享一篇AngularJS集合数据遍历显示的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • 浅谈Angular路由复用策略

    浅谈Angular路由复用策略

    本篇文章主要介绍了浅谈Angular路由复用策略,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • Angular5中状态管理的实现

    Angular5中状态管理的实现

    这篇文章主要介绍了Angular5中状态管理的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 详解angularjs popup-table 弹出框表格指令

    详解angularjs popup-table 弹出框表格指令

    本篇文章主要介绍了angularjs popup-table 弹出框表格指令,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • AngularJS 中的事件详解

    AngularJS 中的事件详解

    本文主要介绍AngularJS 事件,这里整理了相关资料,比较详细的介绍了AngularJS的使用方法,有需要的小伙伴参考下
    2016-07-07

最新评论