过滤筛选

矫情吗；* 2022-06-05 00:45 283阅读 0赞

技术分享：[http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/angular-filter-learn-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：[  ][Link 1][http://www.cdnjs.com/libraries/angular-filter][Link 1]

2.在包含或Angular本身外，在引用angular-filter.js（或者angular-filter.min.js）在你的项目index.html中；

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

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

![复制代码][copycode.gif]

<!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>

![复制代码][copycode.gif]

## filter ##

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

用法：

![复制代码][copycode.gif]

// 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 555-1276
    -->

![复制代码][copycode.gif]

## Date  ##

[https://docs.angularjs.org/api/ng/filter/date][https_docs.angularjs.org_api_ng_filter_date]

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

用法：

![复制代码][copycode.gif]

// 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
    -->

![复制代码][copycode.gif]

## Collection ##

## concat ##

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

![复制代码][copycode.gif]

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>

![复制代码][copycode.gif]

## unique ##

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

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

用法：

![复制代码][copycode.gif]

//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>

![复制代码][copycode.gif]

## join ##

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

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

用法：

![复制代码][copycode.gif]

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

![复制代码][copycode.gif]

## Math ##

## number ##

用来精确浮点数；

用法：

![复制代码][copycode.gif]

//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.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);
                });
            }
        };
    })

![复制代码][copycode.gif]

## max/min ##

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

用法：

![复制代码][copycode.gif]

html中：{
         {array|max:optional}}
    js中：$filter('max')(array,'optional')
     
    <p> {
         { [1,2,3,4,7,8,9] | max }}</p>
    <--result
    9
    -->

![复制代码][copycode.gif]

## sum ##

计算数组中的值；

用法：

![复制代码][copycode.gif]

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

![复制代码][copycode.gif]

GitHub英文文档：[https://github.com/a8m/angular-filter][https_github.com_a8m_angular-filter]

网站链接：[http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/angular-filters/][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的表达式改变时）。

![复制代码][copycode.gif 1]

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 Brad
    Entries that contain an "a": Tobias Brian James Brad

![复制代码][copycode.gif 1]

### 创建自定义filters： ###

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

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

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

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

![复制代码][copycode.gif 1]

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.js
    angular.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: hello
    Reverse: olleh
    Reverse + uppercase: OLLEH
    Reverse, filtered in controller: olleh

![复制代码][copycode.gif 1]

### 有状态的filters(Stateful filters) ###

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

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

![复制代码][copycode.gif 1]

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: hello
    Decorated: *hello*

[http_www.ncloud.hk_E6_8A_80_E6_9C_AF_E5_88_86_E4_BA_AB_angular-filter-learn-1]: http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/angular-filter-learn-1/
[Link 1]: http://www.cdnjs.com/libraries/angular-filter
[copycode.gif]: /images/20220605/310bb2ab451c47f092b4b165c5de1695.png
[https_docs.angularjs.org_api_ng_filter_date]: https://docs.angularjs.org/api/ng/filter/date
[https_github.com_a8m_angular-filter]: https://github.com/a8m/angular-filter
[http_www.ncloud.hk_E6_8A_80_E6_9C_AF_E5_88_86_E4_BA_AB_angular-filters]: http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/angular-filters/
[copycode.gif 1]: /images/20220605/6ef49f786a944024929bd8d6436c7fef.png