📜  如何在AngularJS的控制器中使用过滤器?

📅  最后修改于: 2021-05-13 19:32:57             🧑  作者: Mango

过滤器用于格式化表达式的值并显示给用户。可以在HTML预览,控制器或服务以及指令中使用它。 AngularJS具有许多内置过滤器,但是我们可以轻松定义自己的过滤器。

内置过滤器:

  • AngularJS过滤器过滤器:
  • AngularJS货币过滤器:
  • AngularJS编号过滤器:
  • AngularJS日期过滤器:
  • AngularJS json过滤器:
  • AngularJS小写过滤器
  • AngularJS大写过滤器:
  • AngularJS limitTo过滤
  • AngularJS orderBy筛选

如果过滤器货币使用依赖注入currencyFilter。注入的参数是一个函数,该函数将要格式化的值用作第一个参数,并从第二个参数开始过滤参数。以下方式用于实现过滤器。

方法1:在视图模板中使用过滤器
句法:

  • 通过将过滤器应用于视图模板中的表达式:
    {{ expression | filter }} 
  • 可以将过滤器应用于另一个过滤器的结果。这称为“链接”:
    {{ expression | filter1 | filter2 | ... }}
  • 过滤器可能具有以下参数:
    {{ expression | filter:argument1:argument2:... }}

程序:




    


  
    
           

Price: {{ price | currency }}

       
               

      The currency filter formats a number       to a currency format.     

     

输出:

方法2:筛选器用于指令,服务和控制器。为此,将带有filter名称的依赖项注入您的指令/控制器/服务中

程序:


输出:

方法3:这是第二种方法的修改。过滤器也可以添加到AngularJS来格式化数据值。 AngularJS控制器中使用了$ filter服务。在AngularJS中,您还可以将$ filter服务注入控制器中,并可以将其与以下语法一起用于过滤器。

句法:

  • $filter("filter")(array, expression, compare, propertyKey)
    function myCtrl($scope, $filter)
    {
        $scope.finalResult = $filter("filter")(
                $scope.objArray, $scope.searchObj);
    };
    
  • AngularJS具有一些内置的过滤器,这些过滤器可用于根据某些条件在某些时候减少数组的执行或数组。
    $scope.formatDate = $filter("date")($scope.date, "yyyy-MM-dd");
    $scope.finalResult = $filter('uppercase')($scope.name);
    

程序:将过滤器添加到指令(例如ng-repeat),方法是使用管道符号或字符`|` ,后跟过滤器标签。



  

    

  

  
    
           

          Looping with obj object created for            nameList array:         

        
                
  •                 {{ obj.name + ', ' + obj.city }}             
  •         
       
             

输出: