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定义;
  • 相关阅读:
    回顾Oracle几个用到的基本语句
    JDBC连接数据库中CallableStatement执行有参存储过程及注解其他
    JDBC连接数据库步骤及Class.forName()(转)
    Web开发的编码解决中文乱码
    Filter,Listener(转)
    web.xml 中的listener、 filter、servlet 加载顺序及其详解(转)
    算法训练 比赛安排
    算法训练 字符串编辑
    算法训练 最大值与最小值的计算
    算法训练 判定数字
  • 原文地址:https://www.cnblogs.com/ncloud/p/7544575.html
Copyright © 2011-2022 走看看