AngularJS常见过滤器用法实例总结

本文实例讲述了AngularJS常见过滤器用法。分享给大家供大家参考，具体如下：

过滤器用来格式化需要展示给用户的数据。在HTML中的模板绑定符号 {{ }} 内通过 | 符号来调用过滤器。以下是常用的过滤器。

大小写过滤器

{{ name | uppercase }} 大写过滤器
{{ name | lowercase}} 小写过滤器

实例：（大写过滤器）

<div ng-controller='myController'>
  姓氏: <input type="text" ng-model="student.firstName"></br></br>
  名字: <input type="text" ng-model="student.lastName"></br></br>
  名字转大写: {{student.fullName() | uppercase}}
</div>
<script>
var app=angular.module('app',[]);
app.controller('myController',function($scope){
  $scope.student={
    firstName: "xu",
    lastName: "xiaohong",
    fullName:function(){
      var studentObject;
      studentObject = $scope.student;
      return studentObject.firstName + studentObject.lastName;
    }
  };
});
</script>

货币过滤器

currecy 过滤器可以将一个数值格式化为货币格式。用 {{ 123 | currency }} 来将123转化成货币格式。currecy 过滤器允许我们自己设置货币符号。默认情况下会采用客户端所处区域的货币符号，但是也可以自定义货币符号。如下：

<div ng-controller='myController'>
  Enter fees: <input type="text" ng-model="student.fees"></br>
  fees: {{student.fees | currency:'￥'}}
</div>
<script>
var app=angular.module('app',[]);
app.controller('myController',function($scope){
  $scope.student={
    fees:500
  };
});
</script>

日期过滤器

date 过滤器可以将日期格式化成需要的格式。如下：

<div ng-controller='myController'>
  {{data | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}
</div>
<script>
var app=angular.module('app',[]);
app.controller('myController',function($scope){
  $scope.data=new Date();
});
</script>

limitTo过滤器

limitTo过滤器用来截取数组或字符串，接收一个参数用来指定截取的长度。实例：

<body ng-controller="test">
  {{ childrenArray | limitTo : 2 }}
  <script>
    var app=angular.module('app',[]);
    app.controller('test',function($scope){
      $scope.childrenArray = [
        {name:'kimi',age:3},
        {name:'cindy',age:4},
        {name:'anglar',age:4},
        {name:'shitou',age:6},
        {name:'tiantian',age:5}
      ];
    });
  </script>
</body>

orderBy过滤器：

orderBy过滤器可以将一个数组中的元素进行排序，接收一个参数来指定排序规则，参数可以是一个字符串，表示以该属性名称进行排序。可以是一个函数，定义排序属性。还可以是一个数组，表示依次按数组中的属性值进行排序（若按第一项比较的值相等，再按第二项比较），还是拿上面的孩子数组举例：

<div>{{ childrenArray | orderBy : 'age' }}</div>   //按age属性值进行排序
<div>{{ childrenArray | orderBy : orderFunc }}</div>  //按照函数的返回值进行排序
<div>{{ childrenArray | orderBy : ['age','name'] }}</div> //如果age相同，按照name进行排序

自定义过滤器：

AngularJS编写自定义过滤器的形式和AngularJS的factory service非常相像，一定记得它返回一个对象或者是一个函数即可，编写的时候，只需要一个带有一个以上参数的函数即可。格式大致如下：

app.filter('filter(过滤器)名称',function(){
      return function(需要过滤的对象,过滤器参数1,过滤器参数2,...){
           //...执行业务逻辑代码
           return 处理后的对象;
      }
});

实例：（首字母大写）

{{ 'ginger loves dog treats' | capitalize }}
<script>
  var app=angular.module('app',[]);
  app.filter('capitalize',function(){
    return function(input){
      if(input){
        return input.charAt(0).toUpperCase() + input.slice(1);
      }
    }
  })
</script>

更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

# AngularJS # 过滤器 # Angularjs过滤器实现动态搜索与排序功能示例 # Angularjs使用过滤器完成排序功能 # AngularJs 常用的过滤器 # 详解AngularJS中$filter过滤器使用(自定义过滤器) # 实例解析angularjs的filter过滤器 # AngularJS过滤器filter用法总结 # Angular实现的自定义模糊查询、排序及三角箭头标注功能示例 # AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息) # AngularJS 过滤与排序详解及实例代码 # AngularJS ng-table插件设置排序 # Angular实现的内置过滤器orderBy排序与模糊查询功能示例 # 是一个 # 自定义 # 组中 # 进阶 # 相关内容 # 还可以 # 感兴趣 # 给大家 # 或者是 # 只需要 # 更多关于 # 所处 # 所述 # 绑定 # 程序设计 # 再按 # 转化成 # 返回值 # 客户端 # 首字母

返回目录在线咨询

上一篇：郑州SEO张炎分享：如何有效提升网站排名策略
下一篇：Java JAXB解组XML时出错怎么办？注解错误与XML结构不匹配的排查方法

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

AngularJS常见过滤器用法实例总结

您的项目需求