AngularJS基礎知識筆記之過濾器_AngularJS-js教程-PHP中文網

首頁

web前端

js教程

AngularJS基礎知識筆記之過濾器_AngularJS

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:59 PM

angularjs過濾器

過濾器是用來更改修改數據，並且可以在表達式或使用管道符指令將其歸入。以下是常用的過濾器的清單。

S.No. 名稱描述
1 大寫轉換文字為大寫文字。
2 小寫轉換文字為小寫文字。
3 貨幣貨幣格式格式文字。
4 過濾器過濾數組中它根據所提供的標準的一個子集。
5 排序排序提供標準的基礎數組。大寫過濾器

新增大寫的過濾器使用管道符的表達式。在這裡，添加了大寫過濾器，全部用大寫字母打印學生姓名。

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

小寫濾鏡

新增小寫的過濾器，使用管道符的表達式。在這裡添加小寫過濾器，以小寫字母列印學生姓名。

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>

以上所述就是本文的全部內容了，希望大家能夠喜歡。

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

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

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

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

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

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

Vue报错：无法正确使用filters中的过滤器，怎样解决？引言：在Vue中，过滤器（filters）是一个常用的功能，可以用来对数据进行格式化或者过滤。然而，在使用过程中，有时候我们可能会遇到无法正确使用过滤器的问题。本文将介绍一些常见的原因和解决方法。一、原因分析：过滤器未正确注册：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技术开发中如何进行数据筛选和排序Oct 09, 2023 pm 01:25 PM

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

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

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

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

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

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

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

See all articles