1. 程式人生 > >angularjs中是否選擇所有和$filter過濾orderBy排序

angularjs中是否選擇所有和$filter過濾orderBy排序

class spl clas tran 列表 -c derby 過濾 elf

HTML代碼:

<table class="table table-bordered table-list table-striped no-margin-bottom">
<thead>
<tr>
<th>{{‘column-name‘ | translate}}</th>
<th width="100">{{‘primary-key‘ | translate}}</th>
<th width="100">{{‘required‘ | translate}}</th>
<th width="100">
<md-checkbox class="no-margin-bottom" aria-label="checked"
ng-checked="table.AllColumnChecked"//設置全選按鈕初始狀態(雙向綁定)

ng-click="$ctrl.checkedAllColumn(table)"></md-checkbox>
{{‘select-all‘ | translate}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="column in table.Table.ListColumn | orderBy :‘DisplayOrder‘">
<td>{{column | columnTranslateFilter}}</td>
<td><span ng-if="column.IsPrimaryKey">{{‘true‘ | translate}}</span></td>
<td><span ng-if="column.IsRequired">{{‘true‘ | translate}}</span></td>
<td>
<md-checkbox class="no-margin-bottom" aria-label="checked"
ng-checked="column.checked"
ng-disabled="column.IsPrimaryKey"
ng-click="$ctrl.checkedColumn(table,column)"></md-checkbox>
</td>
</tr>
</tbody>
</table>


js代碼:
self.checkedAllColumn = function (table) {
table.AllColumnChecked = !table.AllColumnChecked;
if (table.AllColumnChecked) {
table.Table.ListColumn.forEach(function (col) {
col.checked = true;
})
table.ListColumn = $filter(‘orderBy‘)(table.Table.ListColumn, ‘DisplayOrder‘//排序條件
);
} else {
table.Table.ListColumn.forEach(function (col) {
col.checked = false;
})
table.ListColumn = [];
}
};
全選:點擊全選按鈕時(checkedAllColumn),if語句中的條件變為true,則篩選所有列選項(table.Table.ListColumn)並更改狀態為選中狀態(col.checked = true;);
取消全選時,if語句中的條件變為false,則跳轉到else篩選所有列選項並取消選中狀態;
orderBy排序:js中$filter(‘oederBy‘)獲取所有列選項並根據排序條件進行排序;html中用| orderBy :‘排序條件‘獲取排序列表;

angularjs中是否選擇所有和$filter過濾orderBy排序