AngularJs学习之路（五）

最新推荐文章于 2022-08-12 15:01:07 发布

Ginoy

最新推荐文章于 2022-08-12 15:01:07 发布

阅读量383

点赞数

分类专栏： [老达笔记]AngularJS AngularJS入门

本文链接：https://blog.csdn.net/yl3395017/article/details/77185213

版权

[老达笔记]AngularJS 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

AngularJS入门

11 篇文章 3 订阅

订阅专栏

AngularJS 过滤器

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

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

DEMO1

<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名为 {{ lastName | uppercase }}</p>
</div>

DEMO2

<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>

自定义过滤器

以下实例自定义一个过滤器 reverse，将字符串反转：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.msg = "Runoob";
});
app.filter('reverse', function() { //可以注入依赖
    return function(text) {
        return text.split("").reverse().join("");
    }
});

自定义过滤器DEMO

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/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 = "Runoob";
});
app.filter('reverse', function() { //可以注入依赖
    return function(text) {
        return text.split("").reverse().join("");
    }
});
</script>
</body>
</html>