AngularJS 过滤器

作者 : 慕源网 本文共5523个字,预计阅读时间需要14分钟 发布时间: 2022-05-4 共79人阅读

AngularJS 过滤器,AngularJS中添加了一些过滤器,以便更轻松地格式化和处理数据。AngularJS中有几个内置过滤器。这里列出了它们以及一些示例,以便更容易理解。

基本语法:

例如,过滤器{{ fullName | uppercase }}将 fullName 格式化为大写格式。

AngularJS 中的一些常用过滤器是:

  • currency数字被格式化为货币格式。
  • date将日期指定为特定格式。
  • filter根据提供的条件过滤数组。
  • limitTo数组或字符串被限制为指定数量的元素/字符。
  • number如果格式化为字符串,则为数字。
  • orderBy数组按表达式排序。
  • lowercase此过滤器将字符串转换为小写字母。
  • uppercase 此过滤器将字符串转换为大写字母。
  • json它将 JavaScript 对象转换为 JSON 字符串。
  1. currency过滤器:
    此过滤器只是将数字格式化为货币。
    <!DOCTYPE html>
    <html>
    <script src=
    "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
    
    <body>
    
    	<div ng-app="myApp" ng-controller="costCtrl">
    
    		<h1>Currency Format - GeeksforGeeks</h1>
    		<h2>Price: {{ price | currency }}</h2>
    
    	</div>
    
    	<script>
    		var app = angular.module('myApp', []);
    		app.controller('costCtrl', function($scope) {
    			$scope.price = 20;
    		});
    	</script>
    
    </body>
    
    </html>

    输出:AngularJS 过滤器

  2. date 过滤器:
    date 过滤器将日期格式化为指定格式。语法:
    {{ date | date : format : timezone }}

     

    <!DOCTYPE html>
    <html>
    <script src=
    "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
    
    <body>
    
    	<div ng-app="myApp" ng-controller="datCtrl">
    
    		<h1>GeeksforGeeks - Date Filter</h1>
    		<p>Date = {{ today | date }}</p>
    
    	</div>
    
    	<script>
    		var app = angular.module('myApp', []);
    		app.controller('datCtrl', function($scope) {
    			$scope.today = new Date();
    		});
    	</script>
    
    </body>
    
    </html>

    输出:AngularJS 过滤器

  3. Filter:
    用于仅显示所需的对象。筛选器选择数组的子集。
    例如,此筛选器只能用于数组,因为它返回仅包含匹配项的数组(数组中给定的条件)。
    <!DOCTYPE html>
    <html>
    <script src=
    "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
    
    <body>
    
    	<div ng-app="myApp" ng-controller="namesCtrl">
    
    		<h1>filter - GeeksforGeeks</h1>
    
    		<ul>
    			<li ng-repeat="x in names | filter : 'e'">
    				{{ x }}
    			</li>
    		</ul>
    
    	</div>
    
    	<script>
    		angular.module('myApp', []).controller('namesCtrl',
    											function($scope) {
    			$scope.names = [
    				'Jani',
    				'Carl',
    				'Margareth',
    				'Hege',
    				'Joe',
    				'Gustav',
    				'Birgit',
    				'Mary',
    				'Kai'
    			];
    		});
    	</script>
    
    	<p>This example displays only the names
    	containing the letter "e".</p>
    
    </body>
    
    </html>

    输出:AngularJS 过滤器

  4. limitTo 过滤器:
    此过滤器返回一个包含指定数量元素的数组或字符串。输出将取决于提供给程序的输入类型。当用于数组时,它返回一个包含指定数量的数组。
    在字符串的情况下,它返回一个只包含指定数量的字符的字符串,而当用于数字时,它返回一个只包含指定位数的字符串。语法:
    {{ object | limitTo : limit : begin }}

     

    在这里,limit 指定要显示的元素数量, begin 指定从哪里开始限制。

    <!DOCTYPE html>
    <html>
    <script src=
    "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
    
    <body>
    
    	<div ng-app="myApp" ng-controller="sizeCtrl">
    
    		<h1>limitTo - GeeksforGeeks</h1>
    		<ul>
    			<li ng-repeat="x in cars | limitTo : 4 : 1">{{x}}</li>
    		</ul>
    
    	</div>
    
    	<script>
    		var app = angular.module('myApp', []);
    		app.controller('sizeCtrl', function($scope) {
    			$scope.cars = ["Audi",
    						"BMW",
    						"Dodge",
    						"Fiat",
    						"Ford",
    						"Volvo",
    						"Lamborghini"];
    		});
    	</script>
    
    	<p>Filter applied from first
    	element to the fifth element.</p>
    
    </body>
    
    </html>

    输出:AngularJS 过滤器

    orderBy 过滤器:
    用于对数组进行排序。可以使用此过滤器对字符串(默认按字母顺序)和数字(默认升序)进行排序。

    语法:

    {{ array | orderBy : expression : reverse }}

    在这里, reverse 可用于反转结果数组的顺序。

    <!DOCTYPE html>
    <html>
    <script src=
    "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
    
    <body>
    
    	<div ng-app="myApp" ng-controller="orderCtrl">
    
    		<h1>orderBy - GeeksforGeeks</h1>
    		<ul>
    			<li ng-repeat="x in customers | orderBy : 'city'">
    				{{x.name + ", " + x.city}}
    			</li>
    		</ul>
    
    	</div>
    
    	<script>
    		var app = angular.module('myApp', []);
    		app.controller('orderCtrl', function($scope) {
    			$scope.customers = [{
    				"name": "Delhi"
    			}, {
    				"name": "Mumbai"
    			}, {
    				"name": "Patna"
    			}, {
    				"name": "Kolkata"
    			}, {
    				"name": "Pune"
    			}, {
    				"name": "Ranchi"
    			}, {
    				"name": "Bhopal"
    			}];
    		});
    	</script>
    
    	<p>Sorting in ascending order.</p>
    
    </body>
    
    </html>

    输出:

    AngularJS 过滤器
    number 过滤器:
    最简单的过滤器。它只是将数字格式化为字符串。语法:
    {{ string | number : fractionsize}}

    这里,‘fractionsize’指定小数位数。

    <!DOCTYPE html>
    <html>
    <script src=
    "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
    <body>
    
    <div ng-app="myApp" ng-controller="nCtrl">
    
    <h1>number Filter - GeeksforGeeks</h1>
    <h2>Rs.{{money | number : 3}}</h2>
    
    </div>
    
    <script>
    var app = angular.module('myApp', []);
    app.controller('nCtrl', function($scope) {
    	$scope.money = 999999;
    });
    </script>
    
    <p>The money is written with three decimals.</p>
    
    </body>
    </html>

    输出:

    AngularJS 过滤器
    lowercase 过滤器:
    此过滤器只是将字符串转换为小写字母。语法:
    {{ string | lowercase }}
    <!DOCTYPE html>
    <html>
    <script src=
    "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
    
    <body>
    
    	<h2>AngularJS - lowercase</h2>
    	<br>
    	<br>
    
    	<div ng-app="myApp" ng-controller="myCtrl">
    
    		<strong>Input:</strong>
    		<br>
    		<input type="text" ng-model="string">
    		<br>
    		<br>
    		<strong>Output:</strong>
    		<br> {{string|lowercase}}
    
    	</div>
    
    	<script>
    		var app = angular.module('myApp', []);
    		app.controller('myCtrl', function($scope) {
    			$scope.string = "";
    		});
    	</script>
    
    </body>
    
    </html>

    输出:

    AngularJS 过滤器
    uppercase 过滤器:
    AngularJS 中的uppercase 过滤器用于将字符串更改为大写字符串或字母。语法:
    {{ string | uppercase}}
    <!DOCTYPE html>
    <html>
    <script src=
    "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
    <body>
    
    <div ng-app="myApp" ng-controller="caseCtrl">
    
    <h1>{{txt | uppercase}}</h1>
    
    </div>
    
    <script>
    var app = angular.module('myApp', []);
    app.controller('caseCtrl', function($scope) {
    	$scope.txt = "GeeksforGeeks!";
    });
    </script>
    
    <p>The text is written in uppercase letters.</p>
    
    </body>
    </html>

    json 过滤器:
    此过滤器只是将 JavaScript 对象转换为 JSON 字符串,这在调试应用程序时非常有用。

    语法:

    {{ object | json : spacing }}

    spacing 指定每个缩进使用的空格数。默认值为 2,但此值是可选的。

    <!DOCTYPE html>
    <html>
    <script src=
    "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
    <body>
    
    <div ng-app="myApp" ng-controller="jsCtrl">
    
    <h1>GeeksforGeeks</h1>
    
    <pre>{{customer | json : 20}}</pre>
    
    </div>
    
    <script>
    var app = angular.module('myApp', []);
    app.controller('jsCtrl', function($scope) {
    	$scope.customer = {
    		"name" : "Milk",
    		"city" : "Patna",
    		"country" : "India"
    	};
    });
    </script>
    
    <p>A JSON string with 20 spaces per indentation.</p>
    
    </body>
    </html>

    输出:AngularJS 过滤器
    让我们看一下数组过滤器的示例。

    <!DOCTYPE html>
    <html>
    
    <body>
    
    	<h1>GeeksforGeeks</h1>
    
    	<p>Click the button to get every element
    	in the array that has a value of 38 or more.</p>
    
    	<button onclick="myFunction()">Try it</button>
    
    	<p id="demo"></p>
    
    	<script>
    		var num = [23, 32, 56, 30, 56, 45, 34, 39];
    
    		function checkNum(num) {
    			return num >= 38;
    		}
    
    		function myFunction() {
    			document.getElementById(
    				"demo").innerHTML = num.filter(checkNum);
    		}
    	</script>
    
    </body>
    
    </html>

    单击“Try it”按钮后,数组中所有值为 38 或更大的元素都会打印到屏幕上。

    AngularJS 过滤器


慕源网 » AngularJS 过滤器

常见问题FAQ

程序仅供学习研究,请勿用于非法用途,不得违反国家法律,否则后果自负,一切法律责任与本站无关。
请仔细阅读以上条款再购买,拍下即代表同意条款并遵守约定,谢谢大家支持理解!

发表评论

开通VIP 享更多特权,建议使用QQ登录