Filters are used to modify data and can be included in expressions or using pipe directives. Below is a list of commonly used filters.
S.No. Name Description
1 Uppercase Convert text to uppercase text.
2 Lowercase Convert text to lowercase text.
3 Currency Currency format text.
4 Filter Filters a subset of the array based on the provided criteria.
5 Sorting Sorting provides standard basic arrays. Caps filter
Add uppercase filter expression using pipe character. Here, a caps filter has been added to print student names in all caps.
Enter first name:<input type="text" ng-model="student.firstName">
Enter last name: <input type="text" ng-model="student.lastName">
Name in Upper Case: {{student.fullName() | uppercase}}
Lower case filter
Add lowercase filter, using pipe expression. Add lowercase filter here to print student names in lowercase letters.
Enter first name:<input type="text" ng-model="student.firstName">
Enter last name: <input type="text" ng-model="student.lastName">
Name in Upper Case: {{student.fullName() | lowercase}}
Currency Filter
The Canadian dollar filter uses the pipe character to return a number expression. Here we have added the filter Currency to print the charges using Currency format.
Enter fees: <input type="text" ng-model="student.fees">
fees: {{student.fees | currency}}
Filter of filters
To show only the required subjects we use subjectName as filter.
Enter subject: <input type="text" ng-model="subjectName">
Subject:
<ul>
<li ng-repeat="subject in student.subjects | filter: subjectName">
{{ subject.name + ', marks:' + subject.marks }}
</li>
</ul>
Sort Filter
To order topics by tag, we use orderBy tag.
Subject:
<ul>
<li ng-repeat="subject in student.subjects | orderBy:'marks'">
{{ subject.name + ', marks:' + subject.marks }}
</li>
</ul>
Example
The following example will demonstrate all the above filters.
testAngularJS.html
<html>
<head>
<title>Angular JS Filters</title>
</head>
<body>
<h2 id="AngularJS-Sample-Application">AngularJS Sample Application</h2>
<div ng-app="" ng-controller="studentController">
<table border="0">
<tr><td>Enter first name:</td><td><input type="text" ng-model="student.firstName"></td></tr>
<tr><td>Enter last name: </td><td><input type="text" ng-model="student.lastName"></td></tr>
<tr><td>Enter fees: </td><td><input type="text" ng-model="student.fees"></td></tr>
<tr><td>Enter subject: </td><td><input type="text" ng-model="subjectName"></td></tr>
</table>
<br/>
<table border="0">
<tr><td>Name in Upper Case: </td><td>{{student.fullName() | uppercase}}</td></tr>
<tr><td>Name in Lower Case: </td><td>{{student.fullName() | lowercase}}</td></tr>
<tr><td>fees: </td><td>{{student.fees | currency}}</td></tr>
<tr><td>Subject:</td><td>
<ul>
<li ng-repeat="subject in student.subjects | filter: subjectName |orderBy:'marks'">
{{ subject.name + ', marks:' + subject.marks }}
</li>
</ul>
</td></tr>
</table>
</div>
<script>
function studentController($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",
fees:500,
subjects:[
{name:'Physics',marks:70},
{name:'Chemistry',marks:80},
{name:'Math',marks:65}
],
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
The above is the entire content of this article, I hope you all like it.
2022年最新5款的angularjs教程从入门到精通Jun 15, 2017 pm 05:50 PMJavascript 是一个非常有个性的语言. 无论是从代码的组织, 还是代码的编程范式, 还是面向对象理论都独具一格. 而很早就在争论的Javascript 是不是面向对象语言这个问题, 显然已有答案. 但是, 即使 Javascript 叱咤风云二十年, 如果想要看懂 jQuery, Angularjs, 甚至是 React 等流行框架, 观看《黑马云课堂JavaScript 高级框架设计视频教程》就对了。
Vue3中的过滤器函数：优雅的处理数据Jun 18, 2023 pm 02:46 PMVue3中的过滤器函数：优雅的处理数据Vue是一个流行的JavaScript框架，拥有庞大的社区和强大的插件系统。在Vue中，过滤器函数是一种非常实用的工具，允许我们在模板中对数据进行处理和格式化。Vue3中的过滤器函数有了一些改变，在这篇文章中，我们将深入探讨Vue3中的过滤器函数，学习如何使用它们优雅地处理数据。什么是过滤器函数？在Vue中，过滤器函数是
Vue 中使用插件实现自定义过滤器的技巧Jun 25, 2023 pm 05:01 PMVue中使用插件实现自定义过滤器的技巧Vue.js提供了一种方便的方式来处理视图数据过滤的需求，即过滤器（Filter）。过滤器主要负责将视图中的数据进行格式化和处理，使数据更加直观和易于理解。Vue内置了一些常用的过滤器，例如日期格式化、货币格式化等，同时也支持自定义过滤器。本文将介绍如何使用Vue插件实现自定义过滤器的技巧，并提供一些实用的过滤
Vue报错：无法正确使用filters中的过滤器，怎样解决？Aug 26, 2023 pm 01:10 PMVue报错：无法正确使用filters中的过滤器，怎样解决？引言：在Vue中，过滤器（filters）是一个常用的功能，可以用来对数据进行格式化或者过滤。然而，在使用过程中，有时候我们可能会遇到无法正确使用过滤器的问题。本文将介绍一些常见的原因和解决方法。一、原因分析：过滤器未正确注册：Vue中的过滤器需要先进行注册，才能在模板中使用。如果过滤器未成功注册，
Vue技术开发中如何进行数据筛选和排序Oct 09, 2023 pm 01:25 PMVue技术开发中如何进行数据筛选和排序在Vue技术开发中，数据筛选和排序是非常常见和重要的功能。通过数据筛选和排序，我们可以快速查询和展示我们需要的信息，提高用户体验。本文将介绍在Vue中如何进行数据筛选和排序，并提供具体的代码示例，帮助读者更好地理解和运用这些功能。一、数据筛选数据筛选是指根据特定的条件筛选出符合要求的数据。在Vue中，我们可以通过comp
使用PHP和AngularJS搭建一个响应式网站，提供优质的用户体验Jun 27, 2023 pm 07:37 PM在如今信息时代，网站已经成为人们获取信息和交流的重要工具。一个响应式的网站能够适应各种设备，为用户提供优质的体验，成为了现代网站开发的热点。本篇文章将介绍如何使用PHP和AngularJS搭建一个响应式网站，从而提供优质的用户体验。PHP介绍PHP是一种开源的服务器端编程语言，非常适用于Web开发。PHP具有很多优点，如易于学习、跨平台、丰富的工具库、开发效
在PHP中，FILTER_VALIDATE_URL常量表示用于验证URL的过滤器Sep 14, 2023 am 10:37 AMFILTER_VALIDATE_URL常量用于验证URL。标志FILTER_FLAG_SCHEME_REQUIRED−URL必须符合RFC标准。FILTER_FLAG_HOST_REQUIRED−URL必须包含主机名。FILTER_FLAG_PATH_REQUIRED−URL必须在域名后面有路径。FILTER_FLAG_QUERY_REQUIRED−URL必须有查询字符串。返回值FILTER_VALIDATE_URL
PHP电子邮件过滤器：过滤和识别垃圾邮件。Sep 19, 2023 pm 12:51 PMPHP电子邮件过滤器：过滤和识别垃圾邮件。随着电子邮件的广泛应用，垃圾邮件的数量也不断增加。对于用户来说，接收到的大量垃圾邮件会导致信息过载和时间浪费。因此，我们需要一种高效的方法来过滤和识别垃圾邮件。本文将介绍如何使用PHP编写一个简单但有效的电子邮件过滤器，并提供具体的代码示例。邮件过滤器基本原理邮件过滤器的基本原理是通过分析邮件的内容和属性，判断其是否
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Zend Studio 13.0.1
Powerful PHP integrated development environment
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
