AngularJS 中的过滤组件

2019-01-10 08:00:00 · 飞浪

了解 AngularJS 中的不同过滤器组件及其实现，包括过滤器、货币、数字、数据、小写/大写等。

介绍

在上一篇关于 AngularJS 的指南中，我们了解了 AngularJS 的基本实现。在本文中，我们将介绍Filter Components，它是 Angular 不可或缺的一部分。

本文涵盖了 AngularJS 的以下领域，并提供了实现和示例：

筛选
货币
数字
日期
小写/大写
限制至
orderBy

过滤组件

Angular 提供过滤组件，用于根据输入要求过滤、组织和排列值。

筛选

过滤器根据数组中的条件和表达式返回新数组的子集。过滤器既可用于 HTML 模板，也可用于 JavaScript。

句法

HTML模板：

      {{ filter_expression | filter : expression : comparator}}

JavaScript的：

      $filter("filter")(array, expression, comparator);

在 HTML 模板中，我们在管道表达式|中使用过滤器，如上所示。此管道函数从第一个表达式获取结果并将输出发送到第二个表达式。

举例说明（HTML 模板中的过滤器）：

      <!-- ng-app - attech an application module to the page -->
<html ng-app="myApp">

<!-- ng-controller - attech a controller functions to the page -->
<body ng-controller="myCtrl">
<!-- ng-init to initialize products as an array -->
<div ng-init="products = [{ name : 'sony', price : 23, quantity : 4},
                          { name : 'nokia', price : 45.3, quantity : 3},
                          { name : 'samsung', price : 65, quantity : 6},
                          { name : 'motorola', price : 12.7, quantity : 8},
                          { name : 'micromax', price : 39.75, quantity : 3},
                          { name : 'lenovo', price : 10, quantity : 2}]">
</div>

<!-- input filed to type expression to be filter -->
<div>
    <label>Search</label>
    <input ng-model="searchText" class="form-control" />
</div>

<table class="table">
    <tbody>
        <tr>
            <th>Name</th>
            <th>Price</th>
            <th>Quantity</th>
        </tr>
        <!-- filter based on value of searchText -->
        <tr ng-repeat="p in products | filter:searchText">
            <td>{{p.name}}</td>
            <td>{{p.price}}</td>
            <td>{{p.quantity}}</td>
        </tr>
    </tbody>
</table>

</body>
<html>
    

在示例中，products是一个实际数组，它根据输入“searchText”显示一组过滤值。

源代码：

HTML 模板中的过滤器的Plunker 。

示例解释（JavaScript 中的过滤器）：

controller.js 文件

      // register myCtrl to the angular module app.
app.controller("myCtrl", function($scope, $filter) {
  // create an array as $scope.products
  $scope.products = [
    { name: "sony", price: 23, quantity: 4 },
    { name: "nokia", price: 45.3, quantity: 3 },
    { name: "samsung", price: 65, quantity: 6 },
    { name: "motorola", price: 12.7, quantity: 8 },
    { name: "micromax", price: 39.75, quantity: 3 },
    { name: "lenovo", price: 10, quantity: 2 }
  ];

  // create a mirror copy of actual array
  $scope.mirrorProducts = angular.copy($scope.products);

  // bind function to ng-keyup event.
  $scope.filterFunc = function() {
    // override the value of mirrorProduct with filtered value
    $scope.mirrorProducts = $filter("filter")($scope.products, {
      $: $scope.searchText
    });
  };
});
    

索引.html

      <body ng-controller="myCtrl">
    <div class="form-group col-lg-10">
        <label class="label label-default" style="margin-left:10px">Search</label>
        <input ng-model="searchText" class="form-control" ng-keyup="filterFunc()" />
    </div>

    <table class="table">
        <tbody>
          <tr>
            <th>Name</th>
            <th>Price</th>
            <th>Quantity</th>
          </tr>
          <!-- use mirrorProducts array to display changes because we are overriding the mirrorProducts array with the original products array every time -->
          <tr ng-repeat="p in mirrorProducts">
            <td>{{p.name}}</td>
            <td>{{p.price}}</td>
            <td>{{p.quantity}}</td>
          </tr>
        </tbody>
    </table>
</body>
    

当我们在 Angular 的控制器中使用过滤时，我们必须在控制器的函数中将依赖项加载为$filter。因此，我们使用$filter('filter')(array, expression, comparator)。

过滤器组件的类型是过滤器，因此代码为$filter('filter_component')即$filter('filter')。

在上面的例子中，我使用$scope.mirrorProducts变量，并在用户每次按下输入字段中的任意键时进行覆盖。由于我们只向用户显示经过筛选的信息，因此我们必须创建实际数组的子集并每次覆盖它以在页面上显示正确的结果。

如果我不创建实际数组的镜像副本会怎样？

如果我不创建实际数组的镜像副本，那么在过滤时，实际数组将被覆盖，我们只剩下过滤后的版本。因此，我们丢失了原始数组值。

我们在过滤数组时使用$作为表达式。
$是一个特殊属性，可用于对对象的任何属性应用过滤。

源代码：

JavaScript 中的Plunker过滤器

货币

Angular 提供了一种更好的方法来格式化价格并将其显示在页面上。货币过滤器将数字格式化为货币，将数字设置为正确的十进制值（如 25.70 美元）。此过滤器可以在 HTML 模板和 JavaScript 中使用。

在 HTML 模板中

      {{ currency_expression | currency : symbol : fractionSize}}

这里，货币表达式是将由货币过滤器格式化的数值，以将数值显示为具有指定货币符号的价格。

管道表达式后的第二个参数是过滤器组件的名称，即货币。symbol和fractionSize是选项值。symbol表示您的当地货币，用于将数字格式化为价格，fractionSize决定价格记录的小数点后的位数。

例如：

      <p>{{25 | currency }}</p>
<!-- This will print result as $25.00. Note that the default fractionSize is 2. -->

<p>{{25 | currency : "₹" }}</p>
<!--This will print result as ₹25.00. -->

<p>{{25.46 | currency : "₹" : 4}}</p>
<!--This will print result as ₹25.4600 because fractionSize is 4 decimal places. -->
    

在 JavaScript 模板中

      $filter("currency")(amount, symbol, fractionSize);

symbol和fractionSize在JS中和在HTMP Template中是相同的。Amount是需要转换成货币格式的数值。$filter是filter组件服务的实例，作为依赖注入到控制器的函数中。

例如：

货币格式：

      <!--JS code-->
$scope.price = $filter('currency')(25);

<!--html code-->
<p>{{price}}</p>

<!--output-->
$25.00
    

具有自定义符号的货币格式：

      <!--JS code-->
$scope.price = $filter('currency')(25,'₹');

<!--html code-->
<p>{{price}}</p>

<!--Output-->
₹25.00
    

具有自定义小数点的货币格式：

      <!--JS code-->
$scope.price = $filter('currency')(25,'₹',4);

<!---Html Code-->
<p>{{price}}</p>

<!--Output-->
₹25.0000
    

查看Plunker 的更多示例。

数字

数字过滤器将数字格式化为文本。此过滤器可以在 HTML 模板以及 JavaScript 中使用。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

AngularJS 中的过滤组件

杭州电子商务研究院

5年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

<html ng-app="myApp">  <body ng-controller="myCtrl">  <div ng-init="products = [{ name : 'sony', price : 23, quantity : 4}, { name : 'nokia', price : 45.3, quantity : 3}, { name : 'samsung', price : 65, quantity : 6}, { name : 'motorola', price : 12.7, quantity : 8}, { name : 'micromax', price : 39.75, quantity : 3}, { name : 'lenovo', price : 10, quantity : 2}]"> </div>  <div> <label>Search</label> <input ng-model="searchText" class="form-control" /> </div> <table class="table"> <tbody> <tr> <th>Name</th> <th>Price</th> <th>Quantity</th> </tr>  <tr ng-repeat="p in products | filter:searchText"> <td>{{p.name}}</td> <td>{{p.price}}</td> <td>{{p.quantity}}</td> </tr> </tbody> </table> </body> <html>

// register myCtrl to the angular module app. app.controller("myCtrl", function($scope, $filter) { // create an array as $scope.products $scope.products = [ { name: "sony", price: 23, quantity: 4 }, { name: "nokia", price: 45.3, quantity: 3 }, { name: "samsung", price: 65, quantity: 6 }, { name: "motorola", price: 12.7, quantity: 8 }, { name: "micromax", price: 39.75, quantity: 3 }, { name: "lenovo", price: 10, quantity: 2 } ]; // create a mirror copy of actual array $scope.mirrorProducts = angular.copy($scope.products); // bind function to ng-keyup event. $scope.filterFunc = function() { // override the value of mirrorProduct with filtered value $scope.mirrorProducts = $filter("filter")($scope.products, { $: $scope.searchText }); }; });

<body ng-controller="myCtrl"> <div class="form-group col-lg-10"> <label class="label label-default" style="margin-left:10px">Search</label> <input ng-model="searchText" class="form-control" ng-keyup="filterFunc()" /> </div> <table class="table"> <tbody> <tr> <th>Name</th> <th>Price</th> <th>Quantity</th> </tr>  <tr ng-repeat="p in mirrorProducts"> <td>{{p.name}}</td> <td>{{p.price}}</td> <td>{{p.quantity}}</td> </tr> </tbody> </table> </body>

<p>{{25 | currency }}</p>  <p>{{25 | currency : "₹" }}</p>  <p>{{25.46 | currency : "₹" : 4}}</p> 