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 :‘排序条件‘获取排序列表;
时间: 2024-12-12 05:09:15

angularjs中是否选择所有和$filter过滤orderBy排序的相关文章

Android中Intent对象与Intent Filter过滤匹配过程详解

如果对Intent不是特别了解,可以参见博文<Android中Intent概述及使用>,该文对本文要使用的action.category以及data都进行了详细介绍. 本文内容有点长,希望大家可以耐心读完. 本文在描述组件在manifest中注册的Intent Filter过滤器时,统一用intent-filter表示. 概述 我们知道,Intent是分两种的:显式Intent和隐式Intent.如果一个Intent明确指定了要启动的组件的完整类名,那么这个Intent就是显式Intent,否

Angularjs中的$filter

官方文档:https://docs.angularjs.org/api/ng/filter/filter 1.Angularjs本身自带了一些filter currency: 为数字添加货币符号. {{currency_expression || currency: symbol:fractionSize}} 其中symbol.fractionSize是可选择的,symbol是定义货币符号,默认是$,fractionSize是小数点后的位数,默认是原数 date:格式化日期 {{date_exp

AngularJS中的过滤器(filter)

AngularJS中的过滤器是用于对数据的格式化,或者筛选的函数,可以直接通过以下语法使用: {{expression|filter}} {{expression|filter1|filter2}} {{expression|filter1:param1,param2,...|filter2} 过滤器的种类有number,currency,date,json,limitTo,lowercase,uppercase,filter,orderBy. <!DOCTYPE html> <html

关于JS中数组splice,concat的用法和AngularJs中filter的补充知识

一 JS数组相关操作 1. splice函数,可做插入,删除,替换操作 1 <script> 2 "use strict" 3 var arr = ['z3']; 4 arr.splice(1,0,'l4'); 5 alert(arr); //z3,l4 6 arr.splice(1,1,'w5'); 7 alert(arr); //z3,w5 8 arr.splice(1,1); 9 alert(arr); //z3 10 arr.splice(10,1,'l4','w5

angularjs中的filter(过滤器)

源文地址:http://www.ncloud.hk/技术分享/angularjs中的filter-过滤器/ filters可以用来格式化数据.例如把时间格式化成为yyyy-MM-dd的形式来呈现给用户,方便查看.angularjs内置了一些filters,我们也可以根据自己的需要自定义一些filters. 下面是angularjs提供的filters: currency:格式化一个数字成为一种货币.当没有提供任何货币符号时,使用当前区域的默认符号. number:格式化数字成为文本 filter

基于AngularJS的过滤与排序

前面了解了AngularJS的使用方法,这里就简单的写个小程序,实现查询过滤以及排序的功能. 本程序中可以了解到: 1 angularjs的过滤器 2 ng-repeat的使用方法 3 控制器的使用 4 数据的绑定 程序设计分析 首先,如果要是先查询过滤,就要使用到AngularJS中的 过滤器filter 了. 直接在表达式的后面使用管道命令符 | ,按照下面的写法就可以达到一个过滤的效果: {{ persons | filter:query }} 通过使用filter实现过滤操作,query

AngularJS 特性—Route、Directive、Filter

Route(路由) AngularJS路由功能是一个纯前端的解决方案,与我们熟悉的后台路由不太一样.后台路由,通过不同的URL会路由到不同的控制器上(controller),再渲染(render)到页面(HTML).AngularJS的前端路由,需求提前对指定的(ng-app),定义路由规则(routeProvider),然后通过不同的URL,告诉(ng-app)加载哪个页面(HTML),再渲染到(ng-app)视图(ng-view)中. AngularJS的前端路由,虽然URL输入不一样,页面

AngularJS中自定义过滤器

AngularJS中为我们提供了一些内置的过滤器,这里列举一些自定义过滤器的场景. 自定义过滤器,不带参赛 //过滤 不带参赛 app.filter('ordinal', function () { return function (number) { if (isNaN(number) || number < 1) { return number; } else { var lastDigit = number % 10; if (lastDigit === 1) { return numbe

AngularJS 过滤与排序详解及实例代码

这篇文章主要介绍了AngularJS 过滤与排序,实现查询过滤以及排序的功能. 通过这篇文章可以了解到 1. angularjs的过滤器 2. ng-repeat的使用方法 3. 控制器的使用 4. 数据的绑定 首先,如果要是先查询过滤,就要使用到AngularJS中的 过滤器filter 了. 直接在表达式的后面使用管道命令符 | ,按照下面的写法就可以达到一个过滤的效果: {{ persons | filter:query }} 通过使用filter实现过滤操作,query是查询过滤时输入的