angularjs 实例

We looked at View Model, View and Controller concepts in the post. Now we are going to discuss about the AngularJS Filters.

我们在看着视图模型 ， 视图和控制器概念职位。 现在我们将讨论AngularJS 过滤器 。

内容 (Contents)

AngularJS过滤器概念 (AngularJS Filter Concepts)

Filters are used to format the value of an expression for display to the user. They can be added to templates, controllers, directives or services and you can also define your own filters. Using filters, Angular lets you organize data, so that it only displays data if it meets certain criteria.

过滤器用于格式化表达式的值以显示给用户。 可以将它们添加到模板，控制器，指令或服务中，还可以定义自己的过滤器。 使用过滤器，Angular可以组织数据，以便仅在满足某些条件时才显示数据。

We use pipe ( | ) character to add angular filters. We will see the use of filters in the section.

我们使用竖线（|）字符添加角度过滤器。 我们将中的部分中看到过滤器的使用。

The following table briefly describes the commonly used Angular Filters.

下表简要介绍了常用的角度过滤器。

Angular Filter	Description
filter	Selects a subset of items from an array and returns it as a new array.
currency	Formats a number to currency format
number	Used to format a number.
date	Formats date to a string based on the requested format.
json	convert JavaScript object to JSON
lowercase	Converts a string to lowercase.
uppercase	converts a string to uppercase
limitTo	Creates a new array or string containing only a specified number of elements.
orderBy	Orders an array by the expression.

角度滤镜	描述
过滤	从数组中选择项的子集，并将其作为新数组返回。
货币	将数字格式化为货币格式
数	用于格式化数字。
日期	根据请求的格式将日期格式化为字符串。
json	将JavaScript对象转换为JSON
小写	将字符串转换为小写。
大写	将字符串转换为大写
限制于	创建仅包含指定数量的元素的新数组或字符串。
订购	通过表达式对数组进行排序。

AngularJS过滤器的作用 (AngularJS Filters in Action)

We will see the use of Angular filters in this section.

我们将在本节中看到Angular滤镜的使用。

大写和小写 (Uppercase and Lowercase)

The following example demonstrates the use of uppercase and lowercase filters in AngularJS.

以下示例演示了在AngularJS中使用大写和小写过滤器。

filter-case.html

filter-case.html

    
         Name: 
     
     
    Blog Name: 
     
     
    
     
    Name: {
   {name | uppercase}}    
     
    Blog Name : {
   {blogName | lowercase}}
    

The following Controller is used in this example. We set the initial state of the scope by attaching the properties with upper and lowercase letters.

在此示例中使用以下控制器。 我们通过将属性附加大写和小写字母来设置范围的初始状态。

blogController.js

blogController.js

function BlogController($scope) {        $scope.name = "pankaj kumar",        $scope.blogName = "JOURNAL DEV"}

货币 (Currency)

The following example demonstrates the use of currency filter in AngularJS.

以下示例演示了AngularJS中货币过滤器的用法。

filter-currency.html

filter-currency.html

   
    
           Quantity: 
           Price: 
           
     
 Toal Default = {
   { (quantity * price) | currency }}
      
     
Total in INR = {
   { (quantity * price) | currency :"INR " }}
   
    

The following Controller is used in this example. We set the initial state of the scope by attaching the properties quantity and price with values 1 and 10 respectively.

在此示例中使用以下控制器。 我们通过将属性数量和价格分别附加值1和10来设置范围的初始状态。

currencyController.js

currencyController.js

function currencyController($scope) {    $scope.quantity = 1;    $scope.price = 10;}

You will see the following output in your browser. The default currency format is in USD($).

您将在浏览器中看到以下输出。 默认货币格式为USD（$）。

使用orderby和过滤器 (Using orderby and filter)

The following example demonstrates the use of angular filters like orderby and filter. We use orderby filter to order the players array by the given expression. In this example, we use name to order the players array. It is ordered alphabetically for strings and numerically for numbers.

We use filter to select a subset of items from players array of objects and returns a new array which matches the filter expression. In this example you can see how filter works as you type.

以下示例演示了如何使用orderby和filter等角度过滤filter 。 我们使用orderby过滤器通过给定的表达式对玩家数组进行排序。 在此示例中，我们使用名称对玩家数组进行排序。 字符串按字母顺序排列，数字按数字顺序排列。

我们使用过滤器从玩家的对象数组中选择项的子集，然后返回与过滤器表达式匹配的新数组。 在此示例中，您可以看到键入时filter工作方式。

filter-orderby.html

filter-orderby.html

    
     Name:
     
     
  
      
    {
   { player.name + ' : ' + player.country }}  
     
    

We use the following controller in the above example.

在上面的示例中，我们使用以下控制器。

playerController.js

playerController.js

function playerController($scope) {        $scope.players = [ {name:'Elano Blumer',country:'Brazil'},			{name:'David James',country:'England'},			{name:'Iain Hume',country:'Canada'}                       ];    }

You will see the following output in your browser. You can type in the input field to filter the list.

您将在浏览器中看到以下输出。 您可以在输入字段中键入以过滤列表。

使用limitTo (Using limitTo)

We use limitTo filter to create a new array or string containing only a specified number of elements. The following example demonstrates the use of limitTo filter

我们使用limitTo过滤器创建一个仅包含指定数量元素的新数组或字符串。 以下示例演示了limitTo过滤器的limitTo

filter-limit.html

filter-limit.html

  
    
         Defined Array of Numbers: {
   {numbers}}
     
    
     
Limit  to:    
         
     
Array after limiting to {
   {limit}} numbers : {
   { numbers | limitTo:limit }}
      
     
{
   {xss}}
  
    

We use the following controller in our example.

在示例中，我们使用以下控制器。

limitController.js

limitController.js

function limitController($scope) {       $scope.numbers = [10,20,30,40,50,60,70,80,90,100];       $scope.limit = 5;}

You will see the following output in your browser.

您将在浏览器中看到以下输出。

You can try using the Angular Filters alone or in combinations depending on your requirements. That’s all for AngularJS filters and you will see more angular features in the coming posts.

您可以根据需要尝试单独或组合使用角度过滤器 。 AngularJS过滤器就这些了，接下来的文章中您将看到更多的角度功能。

翻译自:

angularjs 实例