过滤筛选

来源：互联网发布：lbp算法 matlab 编辑：程序博客网时间：2024/05/29 10:58

技术分享：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> <--resultJohn 555-1276-->

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>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}</span><--result：2010-10-29 11:40:23 +0800-->

Collection

concat

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

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

unique

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

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

用法：

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

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:2}}</li><li>{{val | number}}</li> <-- result:1234.561234.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> {{ [1,2,3,4,7,8,9] | max }}</p><--result9-->

sum

计算数组中的值；

用法：

html中：{{array|sum:optional}}js中：$filter('sum')(array,'optional') {{[1,2,3] | sum:10}}<--result16-->

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

网站链接：http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/angular-filters/

Filter作用就是接收一个输入，通过某个规则进行处理，然后给用户返回处理后的结果。Filter可以用在模板、控制器、或者服务，同时也会很容易自定义一个Filter过滤器。

在模板中使用Filter

Filter可以用于在视图模板中使用一下语法表达式：

{{ expression | filter }}

例如：格式{{ 12 | currency }}是使用currency的filter用法，让数字12过滤为货币形式，结果是$12.00。

Filter可以应用到另一个过滤的结果中。这就是所谓的“chaining”，使用语法如下：

{{ expression | filter1 | filter2 | ... }}

Filter中可能需要参数。语法为：

{{ expression | filter:argument1:argument2:... }}

例如：格式{{ 1234 | number:2 }}是使用number的filter用法，将数字1234过滤为有两位小数点的数字，结果为：1,234.00 。

在controller、services、directives中使用filter

你可以在controller、services、directives中使用filter。

为此，你需要将依赖项名称注入到你的controller/service/directive中：filter；例如：一个过滤器是number，你就需要通过使用依赖注入numberFilter。注入的参数是一个函数，该函数将值作为第一个参数，然后用第二个参数来筛选参数。

下面的例子使用了叫做filter的Filter过滤器。这个filter可以在sub arrays的基础上减少arrays。也可以应用在视图模板的标记，就像：{{ctrl.array|filter:'a'}}，这将为‘a'做一个全文搜索。然而，在视图模板中使用filter将会重新对每一个filter过滤，如果数组比较大的会是加载多次的。

因此下面的例子直接调用在控制器中的filter。通过这个，控制器可以在需要是调用filter（例如：当后端数据加载时或者filter的表达式改变时）。

index.html: <div ng-controller="FilterController as ctrl">  <div>    All entries:    <span ng-repeat="entry in ctrl.array">{{entry.name}} </span>  </div>  <div>    Entries that contain an "a":    <span ng-repeat="entry in ctrl.filteredArray">{{entry.name}} </span>  </div></div> script.js:angular.module('FilterInControllerModule', []).controller('FilterController', ['filterFilter', function(filterFilter) {  this.array = [    {name: 'Tobias'},    {name: 'Jeff'},    {name: 'Brian'},    {name: 'Igor'},    {name: 'James'},    {name: 'Brad'}  ];  this.filteredArray = filterFilter(this.array, 'a');}]);
结果为：All entries: Tobias Jeff Brian Igor James BradEntries that contain an "a": Tobias Brian James Brad

创建自定义filters：

编写自己的filter是非常简单的：只需要在你的模块中注册一个新的filter factory函数。在内部，这里用了filterProvider。这个factory函数应该返回一个新的filter函数并且将输入值作为第一个参数。任何过滤器参数都会作为附加参数传递到过滤器函数中。

这个过滤器函数应该是一个单纯的函数。这意味着它应该stateless 和 idempotent。当输入的函数变化时，angular依赖这些属性并且执行filter。

注意：filter的名称必须是有效的angular表达式标识符。例如uppercase或者orderBy。名字是不允许有特殊的字符，如连字符和点是不允许的。如果你希望你的过滤器有名称空间，那么你可以使用大写（myappSubsectionFilterx）或者下划线（myapp_subsection_filterx）。

下面的示例filter是反写一个字符串。另外，它可以再加一个条件使字符串大写。

index.html<div ng-controller="MyController">  <input ng-model="greeting" type="text"><br>  No filter: {{greeting}}<br>  Reverse: {{greeting|reverse}}<br>  Reverse + uppercase: {{greeting|reverse:true}}<br>  Reverse, filtered in controller: {{filteredGreeting}}<br></div> script.jsangular.module('myReverseFilterApp', []).filter('reverse', function() {  return function(input, uppercase) {    input = input || '';    var out = "";    for (var i = 0; i < input.length; i++) {      out = input.charAt(i) + out;    }    // conditional based on optional argument    if (uppercase) {      out = out.toUpperCase();    }    return out;  };}).controller('MyController', ['$scope', 'reverseFilter', function($scope, reverseFilter) {  $scope.greeting = 'hello';  $scope.filteredGreeting = reverseFilter($scope.greeting);}]);结果为：No filter: helloReverse: ollehReverse + uppercase: OLLEHReverse, filtered in controller: olleh

有状态的filters(Stateful filters)

强烈建议写有状态的filters，因为这些不能用angular进行优化，这往往会导致性能问题。许多有状态的filters转换成无状态的filters仅仅通过揭露隐藏的状态作为model，并且将其转化为一个filter参数。

然而，如果你需要写一个有状态的filters，你必须将filter标记为$stateful，这也就意味着它将在每一个$digest周期内执行一次或多次。

index,html<div ng-controller="MyController">  Input: <input ng-model="greeting" type="text"><br>  Decoration: <input ng-model="decoration.symbol" type="text"><br>  No filter: {{greeting}}<br>  Decorated: {{greeting | decorate}}<br></div> script.js:angular.module('myStatefulFilterApp', []).filter('decorate', ['decoration', function(decoration) {  function decorateFilter(input) {    return decoration.symbol + input + decoration.symbol;  }  decorateFilter.$stateful = true;  return decorateFilter;}]).controller('MyController', ['$scope', 'decoration', function($scope, decoration) {  $scope.greeting = 'hello';  $scope.decoration = decoration;}]).value('decoration', {symbol: '*'});结果为：No filter: helloDecorated: *hello*

阅读全文

0 0