AngularJS 过滤器的简单实例

AngularJS 过滤器

过滤器可以使用一个管道字符（|）添加到表达式和指令中。

AngularJS 过滤器

AngularJS 过滤器可用于转换数据：

过滤器 描述
currency 格式化数字为货币格式。
filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。
uppercase 格式化字符串为大写。

表达式中添加过滤器

过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。.

(（下面的两个实例，我们将使用前面章节中提到的 person 控制器）)

uppercase 过滤器将字符串格式化为大写：

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="personCtrl">

<p>姓名为 {{ lastName | uppercase }}</p>

</div>

<script src="personController.js"></script>

</body>
</html>

 运行结果：

姓名为   DOE

 lowercase 过滤器将字符串格式化为小写：

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="personCtrl">

<p>姓名为 {{ lastName | lowercase }}</p>

</div>

<script src="personController.js"></script>

</body>
</html>

 运行结果：

姓名为  doe

 currency 过滤器

currency 过滤器将数字格式化为货币格式：

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="costCtrl">

数量: <input type="number" ng-model="quantity">
价格: <input type="number" ng-model="price">

<p>总价 = {{ (quantity * price) | currency }}</p>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('costCtrl', function($scope) {
  $scope.quantity = 1;
  $scope.price = 9.99;
});
</script>

</body>
</html>

 运行结果：

数量:  价格:

总价 = $9.99

向指令添加过滤器

过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中。

orderBy 过滤器根据表达式排列数组：

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="namesCtrl">

<p>循环对象:</p>
<ul>
 <li ng-repeat="x in names | orderBy:'country'">
  {{ x.name + ', ' + x.country }}
 </li>
</ul>

</div>

<script src="namesController.js"></script>

</body>
</html>

运行结果：

循环对象：

  • Kai, Denmark
  • Jani, Norway
  • Hege, Sweden

过滤输入

输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。

filter 过滤器从数组中选择一个子集：

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="namesCtrl">

<p>输入过滤:</p>

<p><input type="text" ng-model="test"></p>

<ul>
 <li ng-repeat="x in names | filter:test | orderBy:'country'">
  {{ (x.name | uppercase) + ', ' + x.country }}
 </li>
</ul>

</div>

<script src="namesController.js"></script>

</body>
</html>

运行效果：

输入过滤：

  • KAI, Denmark
  • JANI, Norway
  • HEGE, Sweden

以上就是对AngularJS 过滤器的知识整理，后续继续补充,有需要的朋友可以参考下。

赞 (0)

相关推荐

  • Angularjs之filter过滤器(推荐)

    现在公司用ionic,就是基于angularjs封装了一些api用于webapp,最近用的angularjs的filter确实省了很多代码,现在总结一下! ng比较鸡肋的过滤器,这里就一笔带过吧!鸡汤类常用的filter后面上例子. lowercase(小写) {{ lastName | lowercase }} uppercase(大写) {{ lastName | uppercase }} number(格式化数字) number过滤器可以为一个数字加上千位分割,像这样,123,456,78

  • 详解AngularJS中的filter过滤器用法

    系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter.如果对smarty比较熟悉的话,学习angularjs会比较容易一点.这篇简单说一下angularjs的filter功能,angularjs的filter功能可分为二种,一种是内置的过滤器,一种是自定义的. 一,内置的过滤器 1,uppercase,lowercase大小转换 {{ "lower cap string" | uppercase }} //结果:

  • Angularjs 依赖压缩及自定义过滤器写法

    具体代码如下所示: <!DOCTYPE html> <html> <body> <header> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="angular.min.js"></script> <script src="filt

  • AngularJS基础知识笔记之过滤器

    过滤器是用来更改修改数据,并且可以在表达式或使用管道符指令将其归入.以下是常用的过滤器的列表. S.No. 名称 描述 1 大写 转换文本为大写文本. 2 小写 转换文本为小写文本. 3 货币 货币格式格式文本. 4 过滤器 过滤数组中它根据所提供的标准的一个子集. 5 排序 排序提供标准的基础数组. 大写过滤器 添加大写的过滤器使用管道符的表达式.在这里,添加了大写过滤器,全部用大写字母打印学生姓名. Enter first name:<input type="text" ng

  • AngularJS的内置过滤器详解

    今天我们来了解一下AngularJS的内置过滤器 先来看看这些内置过滤器使用方法: 一个过滤器,不带参数的情况 {{expression | filter}} 一个过滤器,带参数的情况 {{expression | filter:arguments}} 一个过滤器,带多个参数的情况 {{expression | filter: arg1: arg2: ...}} 多个过滤器,不带参数的情况 {{expression | filter1 | filter2 | ...}} 下面我们分别使用以下An

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

    本文实例讲述了AngularJS常见过滤器用法.分享给大家供大家参考,具体如下: 过滤器用来格式化需要展示给用户的数据.在HTML中的模板绑定符号 {{ }} 内通过 | 符号来调用过滤器.以下是常用的过滤器. 大小写过滤器 {{ name | uppercase }} 大写过滤器 {{ name | lowercase}} 小写过滤器 实例:(大写过滤器) <div ng-controller='myController'> 姓氏: <input type="text&quo

  • AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)

    本文实例讲述了AngularJS实现用户登录状态判断的方法.分享给大家供大家参考,具体如下: 使用AngularJS的单页面应用时,由于是本地路由在控制页面跳转,但是有的时候我们需要判断用户是否登录来判断用户是否能进入界面. angularjs是mvc架构所以实现起来很容易也很灵活,我们只MainController里增加一个路由事件侦听并判断,这样就可以避免未登录用户直接输入路由地址来跳转到登录界面地址了 代码中的 $rootScope.user是登录后把用户信息放到了全局rootScope上

  • 详解AngularJS中$filter过滤器使用(自定义过滤器)

    1.内置过滤器 * $filter 过滤器,是angularJs中用来处理数据以更好的方式展示给我用户.比如格式化日期,转换大小写等等. * 过滤器即有内置过滤器也支持自定义过滤器.内置过滤器很多,可以百度.关键是如何使用: * 1.在HTML中直接使用内置过滤器 * 2.在js代码中使用内置过滤器 * 3.自定义过滤器 * * (1)常用内置过滤器 * number 数字过滤器,可以设置保留数字小数点后几位等 * date 时间格式化过滤器,可自己设置时间格式 * filter 过滤的数据一般

  • 详解AngularJS中自定义过滤器

    过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果.主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的元素进行排序等.ng内置了一些过滤器,它们是:currency(货币).date(日期).filter(子串匹配).json(格式化json对象).limitTo(限制个数).lowercase(小写).uppercase(大写).number(数字).orderBy(排序).总共九种.除此之外还可以自定义过滤器,这个就强大了,可以满足任何

  • AngularJS 过滤器（自带和自建）详解

    过滤器用来格式化需要展示给用户的数据.AngularJS有很多实用的内置过滤器,同时也提 供了方便的途径可以自己创建过滤器. 在HTML中的模板绑定符号{{ }}内通过|符号来调用过滤器.例如:{{value|lowercase}}//将值转换成小写 在JavaScript代码中可以通过$filter来调用过滤器 例: app.controller('DemoController', ['$scope', '$filter', function($scope, $filter) { $scope

  • 详解AngularJS Filter（过滤器）用法

    详解AngularJS Filter（过滤器）用法

    AngularJS的filter,中文名"过滤器"是用来过滤变量的值,或者格式化输出,得到自己所期望的结果或格式的东东. Filter简介 Filter是用来格式化数据用的. Filter的基本原型( '|' 类似于Linux中的管道模式): {{ expression | filter }} Filter可以被链式使用(即连续使用多个filter): {{ expression | filter1 | filter2 | ... }} Filter也可以指定多个参数: {{ expr

  • 详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例

    Angularjs内置的过滤器(filter)为我们的数据信息格式化提供了比较强大的功能,比如:格式化时间,日期.格式化数字精度.语言本地化.格式化货币等等.但这些过滤器一般都是在VIEW中使用的,比如格式化时间/日期的VIEW视图代码: <div ng-app> <p> <label>Select a date</label> <input type="date" id="date" ng-model=&quo

随机推荐