技术分享:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/angular-filter-learn-1/

以下介绍为自己在使用angular-filter时,简单总结的用法。

开始

1.你可以使用4中不同的方法来安装angular-filter:

  • 克隆或创建这个存储库
  • 通过bower:通过在你的终端执行:$ bower install angular-filter
  • 通过npm:通过在你的终端执行:$ npm install angular-filter
  • 通过cdnjs:http://www.cdnjs.com/libraries/angular-filter

2.在包含或Angular本身外,在引用angular-filter.js(或者angular-filter.min.js)在你的项目index.html中;

3.添加‘angular.filter’依赖项;

当你做完这些,你的文件看起来就类似以下:

<!doctype html>
<html ng-app="myApp">
<head> </head>
<body>
...
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>
<script src="bower_components/angular-filter/dist/angular-filter.min.js"></script>
...
<script>
var myApp = angular.module('myApp', ['angular.filter']); </script>
...
</body>
</html>

filter

从数组中选取一个子集,并将其返回成一个新的数组;

用法:

// html中:{{ collection | filter : expression : comparator}}
// js中:$filter('filter')(array, expression, comparator)
参数:array:想筛选的数组
expression:用于从数组中筛选的条件
comparator:用于确定预期值(从筛选器表达式)和实际值(从数组中的对象)中使用的比较器,应视为匹配。 $scope.friends = [
{name:'John', phone:'555-1276'},
{name:'Mary', phone:'800-BIG-MARY'},
{name:'Mike', phone:'555-4321'}
]
<tr ng-repeat="friendObj in friends | filter:{name:'John'}">
<td>{{friendObj.name}}</td>
<td>{{friendObj.phone}}</td>
</tr> <--result
John -
-->

Date

https://docs.angularjs.org/api/ng/filter/date

将日期筛选为想要的日期格式;

用法:

// html中:{{ collection | date : format : timezone}}
// js中:$filter('date')(date, format, timezone)
参数:format为设置的日期格式,例如:'yyyy-MM-dd'
timezone被用于格式化时区。 <span>{{ | date:'yyyy-MM-dd HH:mm:ss Z'}}</span>
<--result:
-- :: +
-->

Collection

concat

将另外一个对象或者数组拼接到已有的对象或者数组之后;

function MainController ($scope) {
$scope.array = [ {a: }, {a: } ];
$scope.object = {
: {a: },
: {a: }
};
}
<li ng-repeat="elm in array | concat:object">
{{ elm.a }}
</li> <!--
result: -->

unique

从数组或者对象中移除重复项;

如果提供的是一个字符串,它将用提供的表达式来过滤掉重复使用的。

用法:

//html中:{{collection | unique: 'property'}};
//js中:$filter('unique')(collection, 'property');
参数:collection被筛选的数组或者对象
property去掉这个属性中的重复值
function MainController ($scope) {
$scope.orders = [
{ id:, customer: { name: 'John', id: } },
{ id:, customer: { name: 'William', id: } },
{ id:, customer: { name: 'John', id: } },
{ id:, customer: { name: 'William', id: } },
{ id:, customer: { name: 'Clive', id: } }
];
}
<tr ng-repeat="order in orders | unique: 'customer.id'" >
<td> {{ order.customer.name }} , {{ order.customer.id }} </td>
</tr>
<!-- result:
All customers list:
John
William
Clive
-->

join

将一个数组转换为一个字符串;

默认情况下,它将加入元素与一个单一的空间,但是你可以提供自己的分隔符。

用法:

//html中:{{collection | join: ','}};
//js中:collection.join(',');
参数:collection 需要转换的数组,得到用,连接的字符串 $scope.names = ['John', 'Sebastian', 'Will', 'James'];
<p>{{ names | join:',' }}</p>
<!--result:
John, Sebastian, Will, James
--> ps:js中的split()函数可以使用一个字符串中的某一分隔符将其字符串分隔成为数组。

Math

number

用来精确浮点数;

用法:

//html中:{{ number_expression | number : fractionSize}}
//js中:$filter('number')(number, fractionSize)
参数:number为待精确的数字
fractionSize(可选)为小数点后精确位数,默认值是3 function MainController ($scope) {
$scope.val=1234.56789;
}
<li>{{val | number:}}</li>
<li>{{val | number}}</li> <-- result:
1234.56
1234.567
-->
如果input类型为number,则需要设置:<input type="number" string-to-number/>
定义stringToNumber:
.directive('stringToNumber', function () {
return {
require: 'ngModel',
link: function (scope, element, attrs, ngModel) {
ngModel.$parsers.push(function (value) {
return '' + value;
});
ngModel.$formatters.push(function (value) {
return parseFloat(value, 10);
});
}
};
})

max/min

用来查找并返回数组中的最大值(最小值);

用法:

html中:{{array|max:optional}}
js中:$filter('max')(array,'optional') <p> {{ [,,,,,,] | max }}</p>
<--result -->

sum

计算数组中的值;

用法:

html中:{{array|sum:optional}}
js中:$filter('sum')(array,'optional') {{[,,] | sum:}}
<--result -->

GitHub英文文档:https://github.com/a8m/angular-filter

angularJs中筛选功能-angular.filter-1的更多相关文章

  1. angularJs中图表功能(有集成框架)-angular-flot

    1.柱状图和折线图的数据格式: $scope.Chart.data = [ { label: "离线", data: [[0, 2]] }, { label: "在线&q ...

  2. 详解AngularJS中的filter过滤器用法

    系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter.如果对smarty比较熟悉的话,学习angularjs会比较容易一点.这 ...

  3. 【经验】angularjs 实现带查找筛选功能的select下拉框

    一.背景 对于select的下拉列表,像国家选择这样的功能,全世界那么多国家,一直拉滚动条多辛苦,眼睛也要盯着找,累!so,为优化用户体验,带查找功能的下拉框是非常非常有必要的.都知道jquery里有 ...

  4. AngularJS学习--- AngularJS中的模板template和迭代器过滤filter step2 step3

    1.AngularJS 模板---step2: mvc(Model-View-Controller)模式在后端用的比较多,在前端也是一样的常用; 在AngularJS中,一个视图是模型通过HTML模板 ...

  5. (译) 在AngularJS中使用的表单验证功能【转】

    验证功能是AngularJS里面最酷炫的功能之一,它可以让你写出一个具有良好用户体验的Web应用. 在AngularJS中,有许多用于验证的指令.我们将先学习几个最流行的内置指令,然后再创建一个自定义 ...

  6. (译) 在AngularJS中使用的表单验证功能

    验证功能是AngularJS里面最酷炫的功能之一,它可以让你写出一个具有良好用户体验的Web应用. 在AngularJS中,有许多用于验证的指令.我们将先学习几个最流行的内置指令,然后再创建一个自定义 ...

  7. angularjs中的filter(过滤器)——格式化日期的date

    date过滤器的功能是基于要求的格式格式化一个日期成为一个字符串. 格式化字符串的基本参数: 'yyyy': 用4位数字表示年(例如:AD 1 => 0001, AD 2010 => 20 ...

  8. Easyui DataGrid DateRange Filter 漂亮实用的日期区间段筛选功能

    自定义扩展Jquery easyui datagrid filter组件实现对日期类型区间段的筛选功能.显示效果如一下 是不是非常实用 引用的jquery 组件是 Date Range Picker ...

  9. Angular筛选功能

    业务场景:依据级别(level )和主题(Subtype )向后台传参数,进行筛选向前台返回数据列表. 代码如下:其中filterChoose()用于弹出筛选下拉框,filterButton()用于选 ...

随机推荐

  1. 子iframe刷新父ifrmae的方法

    //子iframe刷新父ifrmae的方法parent.location.href="";parent.location.reload();

  2. OC:通讯录实战

    实战(使用OC的知识制作一个简易通讯录) //语法糖.笑笑语法 // NSString * string = [NSString stringWithFormat:@"string" ...

  3. C# Hashtable 简述

    一,哈希表(Hashtable)简述 在.NET Framework中,Hashtable是System.Collections命名空间提供的一个容器,用于处理和表现类似keyvalue的键值对,其中 ...

  4. javaScript hook

    今天在网上搜索了不少资料,基本概念如下: 钩子(Hook),是Windows消息处理机制的一个平台,应用程序可以在上面设置子程以监视指定窗口的某种消息,而且所监视的窗口可以是其他进程所创建的.当消息到 ...

  5. tab栏切换的特殊效果(类似网易的登陆栏效果)

    代码显示效果如上图所示: 需求说明: 在实际需求中,会遇到这样的情况:不仅是要展示选项卡的内容,而且还有可能在选项卡中需求顾客填写相关内容,而这些内容是顾客如果想了解更深层次的,就会继续填写右边的内容 ...

  6. 手机web开发Repeater四层嵌套

    最近有朋友想让我给他做个手机上页面,页面功能是显示省--市--区--门店信息,这种层级关系的数据,首先来看看效果: 我想现在的手机都是智能机了对于普通的asp.net页面开发应该没什么两样,不过最终开 ...

  7. (高精度运算4.7.27)UVA 10494 If We Were a Child Again(大数除法&&大数取余)

    package com.njupt.acm; import java.math.BigInteger; import java.util.Scanner; public class UVA_10494 ...

  8. SmartThreadPool

    https://github.com/amibar/SmartThreadPool 首先是实例化的时候的参数的解释 //Initialize SmartThreadPool & Make lo ...

  9. wp上一款应用的出生与死亡

    起因 因为自己买了个wp手机,所以对于微软的这个wp系统还是非常喜欢,无奈软件质量不高,过年前便买了个wp的开发者帐号,不是很贵,还想着为wp的生态系统做点贡献.无奈工作繁忙,一直没有机会去做.但是自 ...

  10. iOS开发——网络编程OC篇&使用WebView构建HyBird应用

    使用WebView构建HyBird应用 HyBird是一种本地技术与Web相结合,能过实现跨平台的移动应用开发,最常用的一个框架:PhoneGap 一:首先,写好html代码 <!DOCTYPE ...