angularJs中筛选功能-angular.filter-1

技术分享：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的更多相关文章

angularJs中图表功能（有集成框架）－angular-flot
1.柱状图和折线图的数据格式: $scope.Chart.data = [ { label: "离线", data: [[0, 2]] }, { label: "在线&q ...
详解AngularJS中的filter过滤器用法
系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter.如果对smarty比较熟悉的话,学习angularjs会比较容易一点.这 ...
【经验】angularjs 实现带查找筛选功能的select下拉框
一.背景对于select的下拉列表,像国家选择这样的功能,全世界那么多国家,一直拉滚动条多辛苦,眼睛也要盯着找,累!so,为优化用户体验,带查找功能的下拉框是非常非常有必要的.都知道jquery里有 ...
AngularJS学习--- AngularJS中的模板template和迭代器过滤filter step2 step3
1.AngularJS 模板---step2: mvc(Model-View-Controller)模式在后端用的比较多,在前端也是一样的常用; 在AngularJS中,一个视图是模型通过HTML模板 ...
(译) 在AngularJS中使用的表单验证功能【转】
验证功能是AngularJS里面最酷炫的功能之一,它可以让你写出一个具有良好用户体验的Web应用. 在AngularJS中,有许多用于验证的指令.我们将先学习几个最流行的内置指令,然后再创建一个自定义 ...
(译) 在AngularJS中使用的表单验证功能
验证功能是AngularJS里面最酷炫的功能之一,它可以让你写出一个具有良好用户体验的Web应用. 在AngularJS中,有许多用于验证的指令.我们将先学习几个最流行的内置指令,然后再创建一个自定义 ...
angularjs中的filter(过滤器)——格式化日期的date
date过滤器的功能是基于要求的格式格式化一个日期成为一个字符串. 格式化字符串的基本参数: 'yyyy': 用4位数字表示年(例如:AD 1 => 0001, AD 2010 => 20 ...
Easyui DataGrid DateRange Filter 漂亮实用的日期区间段筛选功能
自定义扩展Jquery easyui datagrid filter组件实现对日期类型区间段的筛选功能.显示效果如一下是不是非常实用引用的jquery 组件是 Date Range Picker ...
Angular筛选功能
业务场景:依据级别(level )和主题(Subtype )向后台传参数,进行筛选向前台返回数据列表. 代码如下:其中filterChoose()用于弹出筛选下拉框,filterButton()用于选 ...

随机推荐

Jquery 校验文本框只能输入负数、小数、整数
/* umlzhang date:2013-09-12 */ //检验只能输入整数,小数和负数 $(function () { var obj = $(&q ...
UI：UITableView表视图
表视图 UITableView,iOS中最重要的视图,随处可⻅见. 表视图通常⽤用来管理⼀一组具有相同数据结构的数据. UITableView继承⾃自UIScrollView,所以可以滚动,表视图的每 ...
MFC 构建、消亡顺序 (一)--单文档（SDI）
MFC 构建.消亡顺序 (一)--单文档 (SDI) by:http://www.cnblogs.com/vranger/ (一)SDI 生成顺序 (二)打开文档-“Open” (三)新建文档-“N ...
oracle中substr函数的用法
1.substr(string string, int a, int b) 参数1:string 要处理的字符串参数2:a 截取字符串的开始位置(起始位置是0) 参数3:b 截取的字符串的长度(而不 ...
永久改动redhat的default route
1,能够用route命令暂时改动: route add default gw <gateway ip> 2, 通过改动/etc/sysconfig/network 文件永久改动: 脚本: ...
Android Studio系列教程一--下载与安装
背景相信大家对Android Studio已经不陌生了,Android Studio是Google于2013 I/O大会针对Android开发推出的新的开发工具,目前很多开源项目都已经在采用,Goo ...
hihocoder #1179 : 永恒游戏暴力
#1179 : 永恒游戏 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://hihocoder.com/problemset/problem/11 ...
DLX舞蹈链 hdu5046
题意: 在N个城市选出K个城市,建飞机场(1 ≤ N ≤ 60,1 ≤ K ≤ N),N个城市给出坐标,选择这K个机场,使得从城市到距离自己最近的机场的最大的距离最小. 输出这个最小值. 思路: ...
C语言程序设计基础
C语言程序设计基础目录 C语言 C语言基础 C语言编程注意 C语言 C语言基础 C语言编程注意 0<9<9和0<9&&9<9是不同的数组的声明和定义 con ...
使用Ant命令压缩JavaScript文件
压缩JavaScript文件可以减少代码尺寸,保护源代码,节省网络带宽,加快页面打开速度,甚至优化JS代码.Yahoo有一个压缩JS的工具叫做YUI compressor, Google也有一个工具叫 ...