提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

angular过滤器

Angular 过滤器
2023-09-27 14:26:51 时间

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>
  • 效果图

在这里插入图片描述

自定义过滤器

<!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>
  • 效果图

在这里插入图片描述

学习资源推荐：https://blog.csdn.net/qq_42813491/article/details/90213353

相关文章