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

標籤：ott   erb   idt   checked   tran   htm   全選   style   round   

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排序