技术分享：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. hdoj 5355 Cake（分析+二分）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5355 分蛋糕的题目,有1-n大小的n个蛋糕,要求平均分成m份,不能切开蛋糕 #include<s ...

  2. JS、jqueryie6浏览器下使用js无法提交表单的解决办法

    -----------------------JS.jqueryie6浏览器下使用js无法提交表单的解决办法---------------------------------------------- ...

  3. Objective-C 学习记录4

    字符串的一些方法使用: 1.创建字典的NSString可变字符串,和NSMutableString不可变字符串.都是objective的对象. char *str是字母数组. 2.字符串格式化:str ...

  4. spring AOP Bean添加新方法

    目的:为studentAdditionalDetails中添加Student的showDetails()和ExtraShowDetails()两个方法 spring  中AOP能够为现有的方法添加额外 ...

  5. Xcode快捷键整理

    下面是Xcode比较常用的快捷键,特别是红色标注的,很常用.用熟了开发编辑代码的的时候就很方便,希望对大家有用~1. 文件CMD + N: 新文件CMD + SHIFT + N: 新项目CMD + O ...

  6. C++在堆上申请和释放内存 - new & delete

    // 动态申请内存, 指向一个未初始化的整型 int *pi = new int; // pi指向一个整型值,初始化为0 int *pi = new int(); // value of i is 1 ...

  7. Codeforces Round #188 (Div. 1) B. Ants 暴力

    B. Ants Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/317/problem/B Des ...

  8. 使用Url.Routeurl获取url值。

    1,获取url值.         public ActionResult About()         {            RouteValueDictionary RVD = new Ro ...

  9. [Angular2 Router] CanActivate Route Guard - An Example of An Asynchronous Route Guard

    In this tutorial we are going to learn how we can to configure an can activate route guard in the An ...

  10. oracle where 后面的条件中|| 是什么意思

    oracle where 后面的条件中|| 是连接符号,Oracle中另一个concat函数能够连接两个字符串 concat(a,b) Oracle中nvl函数的使用方法和作用是什么? 假设你某个字段 ...