首页 > 编程语言 > 详细

angularjs中是否选择所有和$filter过滤orderBy排序

时间:2017-09-18 19:22:41      阅读:431      评论:0      收藏:0      [点我收藏+]

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

原文:http://www.cnblogs.com/ncloud/p/7544575.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!