Angular的过滤器和自定义过滤器

最新推荐文章于 2021-10-20 08:44:18 发布

Sesshoumaru华

最新推荐文章于 2021-10-20 08:44:18 发布

阅读量358

点赞数

分类专栏： Angular 文章标签： Angular的过滤器和自定义过滤器

本文链接：https://blog.csdn.net/qq_38921377/article/details/74518802

版权

Angular 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<!-- 引入AngularJS库 -->
		<script	src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
	</head>
	<body>
		<!-- 
			过滤器 
			 {{name |uppercase}}把字母全部转换成大写
			 {{arr|orderBy}}排序数组从小到大
		 -->
		
		<div ng-app="myApp" ng-controller="myController">
			<p>
				名字 :
				<input type="text" ng-model="name">
			</p>
			<h1>
				Hello {{name |uppercase}}
				<p ng-bind="name"></p>
			</h1>
			<h1>
				{{arr|orderBy|reverse}}
			</h1>
		</div>
	</body>
	<script type="text/javascript">
		//获取app对象module
		var app = angular.module('myApp', []);
		//controller层会调用service层  控制层参数斥是提供服务的参数
		//$scope作用域  $location路径服务  $http发送ajax 
		app.controller('myController', function($scope){
			$scope.name="ls";
			$scope.arr=[1,4,5,7,6,3,2]
		});
		
		//自定义过滤器，参数1表示过滤器名称  参数2表示调用过滤的方法
		app.filter('reverse',function(){
			return function(text){
				return text.reverse();
			}
		})
	</script>
</html>