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 过滤器的知识整理，后续继续补充,有需要的朋友可以参考下。
-
本文向大家介绍AngularJS 简单过滤器示例，包括了AngularJS 简单过滤器示例的使用技巧和注意事项，需要的朋友参考一下 示例 过滤器格式化表达式的值以显示给用户。它们可以在视图模板，控制器或服务中使用。本示例创建一个过滤器（addZ），然后在视图中使用它。此过滤器所做的全部工作是在字符串的末尾添加大写字母“ Z”。 example.js example.html 在视图内部，过滤器采用
-
主要内容：AngularJS 过滤器,表达式中添加过滤器,AngularJS 实例,AngularJS 实例,currency 过滤器,AngularJS 实例,向指令添加过滤器,AngularJS 实例,过滤输入,AngularJS 实例,自定义过滤器,AngularJS 实例过滤器可以使用一个管道字符（|）添加到表达式和指令中。 AngularJS 过滤器 AngularJS 过滤器可用于转换数据： 过滤器 描述 currency 格式化数字为货币格式。 filter 从数组项中选择一个子集
-
本文向大家介绍AngularJS 单元测试过滤器，包括了AngularJS 单元测试过滤器的使用技巧和注意事项，需要的朋友参考一下 示例 过滤器代码： 考试： 跑！ 备注：在inject测试的调用中，您的过滤器需要使用其名称+ Filter来指定。原因是，每当您为模块注册过滤器时，Angular都会Filter在其名称后面附加一个注册它。
-
本文向大家介绍实例解析angularjs的filter过滤器，包括了实例解析angularjs的filter过滤器的使用技巧和注意事项，需要的朋友参考一下 现在公司用ionic，就是基于angularjs封装了一些api用于webapp，最近用的angularjs的filter确实省了很多代码，现在总结一下！ ng比较鸡肋的过滤器，这里就一笔带过吧！鸡汤类常用的filter后面上例子。 lower
-
问题内容： 我有一组项目，我想使用ng-model作为字符串来过滤ng- repeat来过滤集合，到目前为止，我还没有找到一种方法来使表达式被否定时起作用，我做这样的事情： 在文档中，它说我们应该使用！否定表达，但仍然没有运气。 我究竟做错了什么？ 问题答案： ‘！’ 字符位于过滤器字符串的前面，如下所示： 过滤器：’！’+ languageOrigin
-
本文向大家介绍AngularJS过滤器filter用法实例分析，包括了AngularJS过滤器filter用法实例分析的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了AngularJS过滤器filter用法。分享给大家供大家参考，具体如下： 这节我们来看看angularjs的过滤器filter。 在我们开发中经常需要在页面显示给用户的信息需要一定处理格式化，才能显示给用户。比如时间本地化，