zoukankan      html  css  js  c++  java
  • angularjs中是否选择所有和$filter过滤orderBy排序

    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 :'排序条件'获取排序列表;
    ng-checked="table.AllColumnChecked"中table需要在<div>中用ng-repeat定义;
  • 相关阅读:
    CSS属性值一览
    CSS属性一览
    CSS选择器一览
    HTML颜色编码
    游戏
    数据库系统概念
    关于总结
    章节测试
    我的博客皮肤
    Emeditor所有快捷键操作
  • 原文地址:https://www.cnblogs.com/ncloud/p/7544575.html
Copyright © 2011-2022 走看看