Angular4中的checkbox?全選按鈕啟用禁用

這客戶比較特殊,啥都得選中行能選中checkbox,并且未選中時(shí)按鈕需要禁用。 可以理解
代碼比較簡(jiǎn)單,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;
}
}
????后臺(tái)的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實(shí)現(xiàn)checkbox 全選內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
淺談angularJs函數(shù)的使用方法(大小寫(xiě)轉(zhuǎn)換,拷貝,擴(kuò)充對(duì)象)
今天小編就為大家分享一篇淺談angularJs函數(shù)的使用方法(大小寫(xiě)轉(zhuǎn)換,拷貝,擴(kuò)充對(duì)象),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
詳解AngularJS驗(yàn)證、過(guò)濾器、指令
這篇文章主要介紹了AngularJS驗(yàn)證、過(guò)濾器、指令的相關(guān)知識(shí),angularJS中提供了許多的驗(yàn)證指令,可以輕松的實(shí)現(xiàn)驗(yàn)證,具體詳情大家通過(guò)本文一起學(xué)習(xí)吧,需要的朋友可以參考下2017-01-01
AngularJS中過(guò)濾器的使用與自定義實(shí)例代碼
這篇文章運(yùn)用實(shí)例代碼給大家介紹了angularjs中過(guò)濾器的使用和自定義過(guò)濾器,對(duì)大家學(xué)習(xí)AngularJS具有一定的參考借鑒價(jià)值,感興趣的朋友們可以參考借鑒。2016-09-09
angularjs的select使用及默認(rèn)選中設(shè)置
本篇文章主要介紹了angularjs的select使用及默認(rèn)選中設(shè)置,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-04-04
AngularJS集合數(shù)據(jù)遍歷顯示的實(shí)例
下面小編就為大家分享一篇AngularJS集合數(shù)據(jù)遍歷顯示的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
Angular5中狀態(tài)管理的實(shí)現(xiàn)
這篇文章主要介紹了Angular5中狀態(tài)管理的實(shí)現(xiàn),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
詳解angularjs popup-table 彈出框表格指令
本篇文章主要介紹了angularjs popup-table 彈出框表格指令,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09

