AngularJs 系统过滤服务

矫情吗；* 2021-07-24 18:46 366阅读 0赞

过滤服务$filter
    	在NG框架中对数据进行转换显示的小工具,能让页面中的显示内容呈现为不一样的结构
    
    	语法:{
       {任意内容 | 过滤器}}
    
    (1)支持自定义
    
    $filter提供四种过滤器
    (1)纯数字| currency:'货币符号'
    	1、用于将内容转换为货币格式,默认转换为美元格式,即在数字前添加美元符号
    	2、:'...'可不写,若写则其中内容会放在|前面的内容之前
    		如 5599 | currency:'￥'; 显示为￥5599.00
    		
    (2)...| filter:'内容'
    	1、用于从之前中选择符合要求的内容,类似于输入提示功能
    	2、使用ng-repeat指令后接| filter:'内容',筛选时,ng-repeat指令中不能加track by $index;
    	3、内容为空表示都符合
    	
    (3)...|uppercase/lowercase
    	1、对内容进行大/小写转换
    	
    (4)	... | orderBy:'表达式'
    	1、根据表达式的值对内容进行排序
    	2、一般用于ng-repeat结构,不能添加'track by $index'
    	3、表达式的内容只能是ng-repeat语法中代表取出变量中的内容,并且只能直接写出该变量中的内容,如对象不能通过.的
    	方式取具体值,只能写变量,不能直接写数字和字符串,变量是
    	数值则按数字排序,是字符串则按字典排序

代码示例:

<html ng-app='app' ng-controller='main' >
    <head>
    	<meta charset="utf-8">
    	<meta name='viewport' content='width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0'>
    	<title ng-bind='mainTitle'></title>
    
    	<script src='js/angular.js'></script>
    	<script src='js/angular.route.min.js'></script>	
    	<style>
    
    	</style>
    </head>
    <body >
    	
    	<span>我的手机价格:</span><span>{ { 5799| currency:'货币符号' }}</span>
    
    	
    		<input type="text" ng-model='in'>
    		<ul>
    		
    			<li ng-repeat='pname in pnames | filter:in'>{ { pname | uppercase}}</li>
    		</ul>
    
    		<ul>
    			<li ng-repeat='info in infos | orderBy:"score"'>{ { info.uname+":"+info.score}}</li>
    		</ul>
    
    <script>
    	var app=new angular.module('app',[]);
    	app.controller('main',['$scope','$http',function($scope,$http){ 
    		$scope.mainTitle='过滤服务';
    
    		// $scope.in='';
    		$scope.pnames=['jeff','mike','lucy'];
    
    		$scope.infos=[{ 
    			uname:'jeff',
    			score:100
    		},{ uname:'mike',
    			score:90},{ uname:'mocy',
    			score:98},{ uname:'jack',
    			score:90}]
    		
    		
    
    	}])
    </script>
    </body>
    </html>