了解AngularJS中的过滤器-第6部分

by Santhakumar Munuswamy

  Posted on  31 December 2015

  AngularJS


 

本文介绍了f过滤器 一个示例应用程序及其用法。在上一篇文章中,我们了解了 指令 带有示例应用程序。这是在AngularJS上撰写的系列文章,

什么是过滤器

我们可以使用过滤器格式数据将其显示给用户。表达式的格式化值将应用于您的输出数据 in AugularJs. 我们可以使用内置的 筛选器 并创建自己的f过滤器 像自定义f过滤器。

过滤器类型

We can able to implement the following types of directives in AngularJs

1. Currency

2. Date

3. Filter

4. LimitTo

5. JSON

6. Lowercase

7. Uppercase

8. OrderBy

启用它可以访问AngularJS 内置的过滤器,例如货币,日期,limitTo,数字等。我们将讨论下表中的过滤器详细信息列表。 

AngularJS过滤器表列表

序号 筛选器名称 筛选器说明
1 货币 用于将数字格式化为货币
2 日期 用于日期格式
3 过滤 用于从数组中查找项目
4 小写 用于将字符串转换为小写
5 限制于 它包含具有指定项目数的新数组
6 杰森 用于将javascript对象转换为json对象
7 按订单 用于按数组排序
8 大写 用于将字符串转换为大写


如何使用过滤器  

{{ expression | filter_name }}  
{{ expression | filter_name1 | filter_name2 | ... }}

货币

{{ currency_expression | currency : symbol : fractionSize}}  

小写

{{ lowercase_expression | lowercase}} 

大写

{{ uppercase_expression | uppercase}}  

按订单

{{ orderBy_expression | orderBy : expression : reverse}}  

{{ number_expression | number : fractionSize}}  

限制于

{{ limitTo_expression | limitTo : limit : begin}}  

JSON格式

{{ json_expression | json : spacing}}  

过滤

{{ filter_expression | filter : expression : comparator}}  

日期

{{ date_expression | date : format : timezone}} 

步骤1:

打开Visual Studio 2015,转到文件菜单,指向新建,然后单击新项目。将打开新的ASP.NET项目窗口,您可以选择一个ASP.NET Web应用程序,然后键入项目名称AngularJsFiltersDemo,选择项目位置路径,然后单击“确定”按钮。

新的ASP.NET项目窗口将打开,您可以选择一个  空的 带有模板 没有认证 然后单击确定按钮

 

转到解决方案资源管理器,右键单击项目名称,然后单击“管理NuGet程序包”。










NuGet软件包管理器窗口将打开,您可以键入AngularJS并浏览。同时选择AngularJS.Core,然后单击“安装”按钮。  

 












预览窗口将打开,您可以看到AngularJS版本的安装详细信息。单击“确定”按钮,并在AngularJS中成功安装后,您将看到以下内容  

 




您可以看到AngularJsFiltersDemo 项目结构如以下屏幕截图所示。   

 
 










添加CurrencyView.html

转到解决方案资源管理器,右键单击项目名称,然后单击添加,然后单击HTML页面。您可以键入项目名称CurrencyView.html,然后单击确定按钮。

添加CurrencyController.js

转到解决方案资源管理器,右键单击项目名称和“添加”,然后单击JavaScript文件。您可以键入项目名称CurrencyController.js,然后单击确定按钮。

第2步: 货币View.html code here,

<!DOCTYPE html>  
<html>  
<head>  
    <title> San2debug.net | AngularJs Filters Application Demo </title>  
    <meta charset="utf-8" />  
    <script src="Scripts/angular.min.js"></script>  
    <script src="CurrencyController.js"></script>   
</head>  
<body>  
    <h2> AngularJs Salary Calculation Application Demo </h2>  
    <div ng-app="mainApp" ng-controller="货币Controller">  
        Basic Salary: <input type="number" ng-model="basic" /><br /><br />  
        HRA:  <input type="number" ng-model="hra" /><br /><br />  
        Food Allowance:  <input type="number" ng-model="food" /><br /><br />  
        <hr />  
        <strong>Total Salary</strong>={{ basic + hra + food | currency}}  
      </div>  
</body>  
</html>

货币Controller.js code here,

var mainApp = angular.module('mainApp', []);  
mainApp.controller('CurrencyController', function ($scope) {  
    $scope.basic = 7000;  
    $scope.hra = 2300;  
    $scope.food = 1200;  
});  

添加EmployeeView.html

转到解决方案资源管理器,右键单击项目名称,然后单击添加,然后单击HTML页面。您可以键入项目名称EmployeeView.html,然后单击“确定”按钮。

添加EmployeeController.js

转到解决方案资源管理器,右键单击项目名称和“添加”,然后单击JavaScript文件。您可以键入项目名称EmployeeController.js,然后单击“确定”按钮。

EmployeeView.html 这里的代码

<!DOCTYPE html>  
<html>  
<head>  
    <title> San2debug.net | AngularJs Filters Application Demo </title>  
    <meta charset="utf-8" />  
    <script src="Scripts/angular.min.js"></script>  
    <script src="EmployeeController.js"></script>   
</head>  
<body>  
    <center>  
        <h2> AngularJs Filters Application Demo </h2>  
        <div ng-app="mainApp" ng-controller="EmployeeController">  
            <table border="1" cellpadding="3" cellspacing="6" width="50%">  
                <tr>  
                    <td>First Name:</td>  
                    <td><input type="text" ng-model="employee.firstName"></td>  
                </tr>  
                <tr>  
                    <td>Last Name:</td>  
                    <td><input type="text" ng-model="employee.lastName"></td>  
                </tr>  
                <tr>  
                    <td>Salary:</td>  
                    <td><input type="number" ng-model="employee.salary"></td>  
                </tr>  
            </table>  
            <hr />  
            <table border="0">  
                <tr>  
                    <td><strong>Full Name (in Capital Letters): </strong>{{employee.fullName() | uppercase}} <br /> </td>  
                </tr>  
                <tr>  
                    <td><strong>Full Name (in Normal Letters): </strong>{{employee.fullName() | lowercase}} <br /> </td>  
                </tr>  
                <tr>  
                    <td><strong>Salary: </strong>{{employee.salary | currency}}  <br /></td>  
                </tr>  
            </table>  
        </div>  
    </center>  
</body>  
</html> 

EmployeeController.js code here,

var mainApp = angular.module('mainApp', []);  
mainApp.controller('EmployeeController', function ($scope) {  
  
    $scope.employee = {  
  
        firstName: "Santhakumar",  
        lastName: "Munuswamy",  
        salary: 10000,  
  
        fullName: function () {  
  
            var employeeObject;  
  
            employeeObject = $scope.employee;  
  
            return employeeObject.firstName + " " + employeeObject.lastName;  
        }  
    };  
  
});  

步骤3: AngularJS Filters Application演示输出如以下屏幕截图所示,  

结论

本文可帮助您了解 的 Filters  a 使用Visual Studio 2015的示例应用程序。 感谢您阅读我的文章。请分享您的意见或建议

 


关于作者
Santhakumar Munuswamy是一位经验丰富的解决方案架构师,并且是Cloud / AI解决方案中最有价值的专家。他在解决方案设计,软件产品开发,技术文档,Web和云应用程序的项目管理方面拥有大约14年的经验。他在不同领域(汽车,电信,医疗保健,物流和仓库自动化等)的IT行业经验丰富,担任过技术架构师,Genesys顾问,技术负责人,团队负责人和开发人员。他在指导和指导高潜力开发人员方面经验丰富。

跟着我: 脸书, 推特, 谷歌加, 领英
博客评论由 领英


Month List

社区徽章