今天完成的事情：今天学习了AngularJS 过滤器的相关的内容
明天计划的事情：继续学习AngularJS的后续内容
遇到的问题：目前只会进行使用具体的内容理解还是需要多看看的
收获：AngularJS 过滤器是可以使用一个管道字符（|）添加到表达式和指令中。
AngularJS 过滤器可用于转换数据：
currency 格式化数字为货币格式。
filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。
uppercase 格式化字符串为大写。
currency 过滤器将数字格式化为货币格式，例如
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/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>
运行结果
随意输入
orderBy 过滤器根据表达式排列数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/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>
运行结果
uppercase 过滤器将字符串格式化为大写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//cdn.staticfile.org/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>
运行结果
变成大写了
lowercase 过滤器将字符串格式化为小写：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//cdn.staticfile.org/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>
运行结果
输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。
filter 过滤器从数组中选择一个子集：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/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>
运行结果
输入
可以进行过滤
自定义一个过滤器 reverse，例如将字符串反转：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
姓名: {{ msg | reverse }}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.msg = "ABC";
});
app.filter('reverse', function () { //可以注入依赖
return function (text) {
return text.split("").reverse().join("");
}
});
</script>
</body>
</html>
运行结果
简单的例子整合
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<div ng-bind="myName | uppercase"></div>
<!--uppercase转换成大写-->
<div ng-bind="myName | lowercase"></div>
<!--lowercase转换成小写-->
<div class="" ng-bind="money | currency : '￥'"> </div>
<!--currency 过滤器将数字格式化为货币格式-->
<div class="" ng-repeat="v in city | orderBy:'id'">
<p ng-bind="v.name"></p>
</div>
<!--orderBy 过滤器根据表达式排列数组-->
<div class="" ng-repeat="v in city | orderBy:'-id' | filter : ''">
<p ng-bind="v.name" style="color:red;"></p>
</div>
<!--orderBy 过滤器根据表达式排列数组 默认正序asc,倒序添加-负号-->
<!--filter 过滤器根据表达式过滤不包含过滤器中的内容-->
<!--自定义注入依赖-->
<div class="" ng-bind="myName | aa" style="color:blue;">
<!--自定义过滤器aa-->
</div>
</div>
<script>
angular.module('myApp', []).controller('myCtrl', function ($scope) {
$scope.myName = "Dhx";
$scope.money = 100;
$scope.city = [
{ "id": "1", "name": "福建" },
{ "id": "2", "name": "广东" },
{ "id": "5", "name": "上海" },
{ "id": "4", "name": "北京" },
{ "id": "3", "name": "四川" }
]
}).filter('aa', function () { //自定义过滤器，aa为自定义过滤名称 ，val为穿参，split("")将val切割成数组，reverse()将数组反转，join("")将数组变成字符串
return function (val) {
return val.split("").reverse().join("");
}
})
</script>
</body>
</html>
运行结果
记录下来，剩下的明天再继续
返回列表
评论