angular过滤器

最新推荐文章于 2024-12-28 06:10:59 发布

原创最新推荐文章于 2024-12-28 06:10:59 发布 · 825 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#过滤器

angular 专栏收录该内容

17 篇文章

订阅专栏

本文深入讲解Angular中的过滤器使用，包括基本过滤器如uppercase的直接应用，以及如何自定义过滤器实现特定功能，如字符串反转。通过实例代码展示，帮助读者理解和掌握Angular过滤器的运用。

angular过滤器

- 基本过滤器
- 自定义过滤器

基本过滤器

基本用法 {{data|format}},数据|格式

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div ng-controller="MainCtrl as mc">
        {{ mc.name|uppercase}}
    </div>
    <script src="http://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
    <script type="text/javascript">
    var myapp = angular.module("myapp", []);
    myapp.controller("MainCtrl", [function() {
        this.name = "lengyuexin"
    }]);
    </script>


</body>

</html>

效果图

在这里插入图片描述

其他不演示了，可以参考菜鸟教程
http://www.runoob.com/angularjs/angularjs-filters.html

自定义过滤器

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div ng-controller="MainCtrl as mc">
       <p>过滤前：{{mc.msg}}</p> 
       <p>过滤后：{{mc.msg|reverse}}</p>
    </div>
    <script src="http://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
    <script type="text/javascript">
	  var app = angular.module('app', []);
		app.controller('MainCtrl',[function() {
		    this.msg = "hello";
		}]);
	   app.filter('reverse', function() { 
	     return function(text) {
	        return text.split("").reverse().join("");
	    }
	});
    </script>
</body>
</html>