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

过滤器用于格式化表达式的值并显示给用户。可以在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 }}
  
    
  
    
        var app = angular.module('app1', []);
        app.controller('currencyCtrl', function($scope) {
            $scope.price = 100;
        });
    
  
    
      The currency filter formats a number
      to a currency format.
    
  

  

输出：

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

程序：

var listedItems = [
    { itemID: 001, itemName: "Laptop", stockLeft: 1 },
    { itemID: 002, itemName: "Cell Phone", stockLeft: 3 },
    { itemID: 003, itemName: "Earphones", stockLeft: 0 },
    { itemID: 004, itemName: "Chargers", stockLeft: 5 },
    { itemID: 005, itemName: "Headphones", stockLeft: 0 },
    { itemID: 006, itemName: "USB Cables", stockLeft: 15}
];
  
 listedItems = listedItems.filter(function (item) {
    return (item.stockLeft > 0);
});
  
// This will display the no of items are in stock
prompt("", "There are " + listedItems.length
        + " items left in shop.");

输出：

方法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 }}
            
        
  
    
  
    
        angular.module("app1", []).controller(
                "piprCtrl", function($scope) {
            $scope.nameList = [{
                name: "Hardik",
                city: "Chandigarh"
            }, {
                name: "Shekhar",
                city: "Dehradun"
            }, {
                name: "Sanyam",
                city: "Chandigarh"
            }, {
                name: "Poojan",
                city: "Dehradun"
            }, {
                name: "Aman",
                city: "Muzaffarnagar"
            }, {
                name: "Shashank",
                city: "Roorkee"
            }, {
                name: "Shazi",
                city: "Lucknow"
            }, {
                name: "Harshit",
                city: "Dehradun"
            }, {
                name: "Abhishek",
                city: "Gangoh"
            }];
        });
    
  

  

输出：