AngularJS中的过滤器使用详解_AngularJS-js教程-PHP中文网

AngularJS Sample Application

首页

web前端

js教程

AngularJS中的过滤器使用详解_AngularJS

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:54 PM

angularjs 过滤器

过滤器是用来更改修改数据，并且可以在表达式或使用管道符指令将其归入。以下是常用的过滤器的列表。

2015616121340418.jpg (540×292)

小写过滤器

添加小写的过滤器，使用管道符的表达式。在这里添加小写过滤器，以小写字母打印学生姓名。

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}}

登录后复制

货币滤波器

加币过滤器使用管道符返回数的表达式。在这里，我们添加了过滤器，货币使用货币格式的打印费用。

Enter fees: <input type="text" ng-model="student.fees">
fees: {{student.fees | currency}}

登录后复制

过滤器的过滤器

要仅显示所需的主题，我们使用subjectName作为过滤器。

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>

登录后复制

排序过滤器

要通过标记排序主题，我们使用orderBy标记。

Subject:
<ul>
 <li ng-repeat="subject in student.subjects | orderBy:'marks'">
  {{ subject.name + ', marks:' + subject.marks }}
 </li>
</ul>

登录后复制

例子

下面的例子将展示上述所有的过滤器。
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>

登录后复制

输出

在Web浏览器打开textAngularJS.html，看到以下结果：

2015616121404523.png (688×433)

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

Java教程

1664

CakePHP 教程

1423

Laravel 教程

1318

PHP教程

1269

C# 教程

1248

显示更多

Related knowledge

Vue报错：无法正确使用filters中的过滤器，怎样解决？ Aug 26, 2023 pm 01:10 PM

Vue报错：无法正确使用filters中的过滤器，怎样解决？引言：在Vue中，过滤器（filters）是一个常用的功能，可以用来对数据进行格式化或者过滤。然而，在使用过程中，有时候我们可能会遇到无法正确使用过滤器的问题。本文将介绍一些常见的原因和解决方法。一、原因分析：过滤器未正确注册：Vue中的过滤器需要先进行注册，才能在模板中使用。如果过滤器未成功注册，

2022年最新5款的angularjs教程从入门到精通 Jun 15, 2017 pm 05:50 PM

Javascript 是一个非常有个性的语言. 无论是从代码的组织, 还是代码的编程范式, 还是面向对象理论都独具一格. 而很早就在争论的Javascript 是不是面向对象语言这个问题, 显然已有答案. 但是, 即使 Javascript 叱咤风云二十年, 如果想要看懂 jQuery, Angularjs, 甚至是 React 等流行框架, 观看《黑马云课堂JavaScript 高级框架设计视频教程》就对了。

使用PHP和AngularJS搭建一个响应式网站，提供优质的用户体验 Jun 27, 2023 pm 07:37 PM

在如今信息时代，网站已经成为人们获取信息和交流的重要工具。一个响应式的网站能够适应各种设备，为用户提供优质的体验，成为了现代网站开发的热点。本篇文章将介绍如何使用PHP和AngularJS搭建一个响应式网站，从而提供优质的用户体验。PHP介绍PHP是一种开源的服务器端编程语言，非常适用于Web开发。PHP具有很多优点，如易于学习、跨平台、丰富的工具库、开发效

Vue技术开发中如何进行数据筛选和排序 Oct 09, 2023 pm 01:25 PM

Vue技术开发中如何进行数据筛选和排序在Vue技术开发中，数据筛选和排序是非常常见和重要的功能。通过数据筛选和排序，我们可以快速查询和展示我们需要的信息，提高用户体验。本文将介绍在Vue中如何进行数据筛选和排序，并提供具体的代码示例，帮助读者更好地理解和运用这些功能。一、数据筛选数据筛选是指根据特定的条件筛选出符合要求的数据。在Vue中，我们可以通过comp

PHP电子邮件过滤器：过滤和识别垃圾邮件。 Sep 19, 2023 pm 12:51 PM

PHP电子邮件过滤器：过滤和识别垃圾邮件。随着电子邮件的广泛应用，垃圾邮件的数量也不断增加。对于用户来说，接收到的大量垃圾邮件会导致信息过载和时间浪费。因此，我们需要一种高效的方法来过滤和识别垃圾邮件。本文将介绍如何使用PHP编写一个简单但有效的电子邮件过滤器，并提供具体的代码示例。邮件过滤器基本原理邮件过滤器的基本原理是通过分析邮件的内容和属性，判断其是否

Vue3中的过滤器函数：优雅的处理数据 Jun 18, 2023 pm 02:46 PM

Vue3中的过滤器函数：优雅的处理数据Vue是一个流行的JavaScript框架，拥有庞大的社区和强大的插件系统。在Vue中，过滤器函数是一种非常实用的工具，允许我们在模板中对数据进行处理和格式化。Vue3中的过滤器函数有了一些改变，在这篇文章中，我们将深入探讨Vue3中的过滤器函数，学习如何使用它们优雅地处理数据。什么是过滤器函数？在Vue中，过滤器函数是

在PHP中，FILTER_VALIDATE_URL常量表示用于验证URL的过滤器 Sep 14, 2023 am 10:37 AM

FILTER_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

Vue 中使用插件实现自定义过滤器的技巧 Jun 25, 2023 pm 05:01 PM

Vue中使用插件实现自定义过滤器的技巧Vue.js提供了一种方便的方式来处理视图数据过滤的需求，即过滤器（Filter）。过滤器主要负责将视图中的数据进行格式化和处理，使数据更加直观和易于理解。Vue内置了一些常用的过滤器，例如日期格式化、货币格式化等，同时也支持自定义过滤器。本文将介绍如何使用Vue插件实现自定义过滤器的技巧，并提供一些实用的过滤

See all articles

AngularJS中的过滤器使用详解_AngularJS

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题