`

AngularJS实战之filter的使用一

阅读更多
一、格式化数字为货币格式。
<div>{{money|currency:"$"}}</div>
<div>{{money|currency:"RMB"}}</div>

script:
app.controller("crl", function($scope, $filter) {
		$scope.money="4545";
	});

显示为

二、lowercase 格式化字符串为小写。
姓名为 {{ lastName | lowercase }}


app.controller("crl", function($scope, $filter) {
     $scope.lastName ="AAA";
});

显示为
aaa
三、uppercase 格式化字符串为大写。
姓名为 {{ lastName | uppercase }}


app.controller("crl", function($scope, $filter) {
     $scope.lastName ="aaa";
});

显示为
AAA
四、filter 从数组项中选择一个子集。
	<div>{{array|filter:"s"}}</div>
	<div ng-repeat="item in array|filter:'s'">{{item.name}}</div>


app.controller("crl", function($scope, $filter) {
		$scope.array = [ {
			name : 'Tobias'
		}, {
			name : 'Jeff'
		}, {
			name : 'Brian'
		}, {
			name : 'Igor'
		}, {
			name : 'James'
		}, {
			name : 'Brad'
		} ];
	});

显示为
[{"name":"Tobias"},{"name":"James"}]
Tobias
James
五、orderBy 根据某个表达式排列数组。
输入过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中,该过滤器后跟一个冒号和一个模型名称。模型名字前加负号为降序,默认为升序
<div ng-repeat="item in array|orderBy:'-name'">降序   {{item.name}}</div>
	<div ng-repeat="item in array|orderBy:'name'">升序     {{item.name}}</div>

app.controller("crl", function($scope, $filter) {
		$scope.array = [ {
			name : 'Tobias',age:"18"
		}, {
			name : 'Jeff',age:"19"
		}, {
			name : 'Brian',age:"19"
		}, {
			name : 'Igor',age:"55"
		}, {
			name : 'James',age:"19"
		}, {
			name : 'Brad',age:"19"
		} ,{
			name : 'aaas',age:"19"
		}];
	});

显示为
降序 Tobias
降序 Jeff
降序 James
降序 Igor
降序 Brian
降序 Brad
降序 aaas
升序 aaas
升序 Brad
升序 Brian
升序 Igor
升序 James
升序 Jeff
升序 Tobias
5.1.多个模型排序(先按名字排序在按年龄排序)
<div ng-repeat="item in array|orderBy:['name','age']">升序     {{item.name}}{{item.age}}</div>

app.controller("crl", function($scope, $filter) {
		$scope.array = [ {
			name : 'Tobias',age:"18"
		}, {
			name : 'Jeff',age:"19"
		}, {
			name : 'Brian',age:"19"
		}, {
			name : 'Igor',age:"55"
		}, {
			name : 'James',age:"19"
		}, {
			name : 'adsd',age:"19"
		} ,{
			name : 'adsd',age:"20"
		}];

	});

显示为
升序 adsd19
升序 adsd20
升序 Brian19
升序 Igor55
升序 James19
升序 Jeff19
升序 Tobias18
  • 大小: 2.1 KB
0
0
分享到:
评论

相关推荐

    AngularJS实战 PDF

    **AngularJS实战PDF**是一本深入探讨AngularJS框架的实战指南,旨在帮助开发者掌握这个强大的JavaScript框架,并在实际项目中应用。AngularJS是由Google维护的一个开源项目,它为构建动态Web应用提供了丰富的功能和...

    AngularJS实战之ng-repeat的详细用法

    **AngularJS实战之ng-repeat的详细用法** AngularJS,作为一个强大的前端JavaScript框架,由Google维护,被广泛用于构建交互式、数据驱动的Web应用程序。其中,`ng-repeat`指令是AngularJS中的核心功能之一,它允许...

    Social-Network:AngularJS 实战项目

    在本项目"Social-Network:AngularJS 实战项目"中,我们将深入探讨使用AngularJS构建一个社交网络平台的全过程。AngularJS是Google维护的一个强大的前端JavaScript框架,它为开发复杂Web应用提供了丰富的功能和结构。...

    AngularJS中filter的使用实例详解

    本文将详细介绍AngularJS中filter的使用,通过实例讲解各种常见场景下的filter应用。 一、格式化数字为货币格式 数字的货币格式化是一个常见的需求,AngularJS提供的currency过滤器可以非常方便地实现这一功能。...

    AngularJS实现地区选择

    - AngularJS的双向数据绑定是其核心特性之一。地区数据可能存储在一个服务(Service)或工厂(Factory)中,通过`$http`服务从服务器获取,然后绑定到视图上。 - 地区数据结构可能是树状的,每个节点代表一个区域...

    angularjs 开发实例

    1. **双向数据绑定**:这是AngularJS最显著的特点之一,它使得视图和模型之间的数据自动同步。任何一方的更改都会立即反映到另一方,减少了手动同步数据的繁琐工作。 2. **依赖注入**(Dependency Injection, DI)...

    AngularJS快速入门教程

    #### 五、AngularJS实战案例分析 - **案例一:简单的待办事项应用**:构建一个能够添加、删除待办事项的简单应用,演示如何使用控制器、模型和视图来管理状态。 - **案例二:天气查询API调用**:使用$http服务来...

    AngualrJS权威指南 angularjs开发下一代应用 angularjs详细使用说明

    1. **数据绑定**:AngularJS的数据绑定是其最显著的特性之一,允许开发者在视图和模型之间建立双向绑定,自动同步两者的变化。这减少了手动操作DOM的复杂性,提升了代码的可读性和维护性。 2. **指令系统**:...

    angularjsDEMO

    《AngularJS实战DEMO解析》 AngularJS,作为一款由Google维护的JavaScript框架,自2009年诞生以来,已经在Web开发领域产生了深远影响。它以其强大的数据绑定和依赖注入特性,为开发者构建动态、单页应用(SPA)提供...

    AngularJS实用开发技巧(推荐)

    1. **放弃IE8支持**:AngularJS不支持过时的Internet Explorer 8,因此在开发过程中应确保目标用户群使用的是较新的浏览器。 2. **四大核心特性**: - **MVC**:Model-View-Controller架构,将应用程序分为模型、...

    angularjs表格内容搜索过滤代码.zip

    总的来说,这个示例项目为学习如何在AngularJS中实现表格内容的搜索和过滤提供了一个实战平台。开发者可以通过研究代码,了解如何利用AngularJS的特性来创建动态交互的web应用,特别是在处理大量数据展示和用户搜索...

    angular-with-odata-example:使用 angularjs 使用 odata 的示例

    标题中的“angular-with-odata-example”表明这是一个关于使用AngularJS框架与OData协议进行数据交互的示例项目。AngularJS是Google维护的一款强大的前端JavaScript框架,用于构建动态Web应用程序。而OData(开放...

    JavaEE开发的颠覆者SpringBoot实战[完整版].part1

    《JavaEE开发的颠覆者: Spring Boot实战》从Spring 基础、Spring MVC 基础讲起,从而无难度地引入Spring Boot 的学习。涵盖使用Spring Boot 进行Java EE 开发的绝大数应用场景,包含:Web 开发、数据访问、安全控制...

    angular 学习,增删改查

    在AngularJS中,数据绑定是其核心特性之一,允许开发者将视图与模型直接关联,使得UI的更新与数据模型的变化同步。在增删改查场景中,我们通常会创建一个控制器(Controller)来管理业务逻辑,它与视图(View)通过...

    AngularJs:Angular JS指令和过滤器

    过滤器可以串联使用,例如`{{ value | filter1 | filter2 }}`,先通过`filter1`处理,再通过`filter2`处理。 ### 实战应用 在实际开发中,指令和过滤器常常结合使用,以实现复杂的UI逻辑和数据处理。例如,你可以...

    JavaEE开发的颠覆者SpringBoot实战[完整版].part2

    《JavaEE开发的颠覆者: Spring Boot实战》从Spring 基础、Spring MVC 基础讲起,从而无难度地引入Spring Boot 的学习。涵盖使用Spring Boot 进行Java EE 开发的绝大数应用场景,包含:Web 开发、数据访问、安全控制...

    JavaEE开发的颠覆者SpringBoot实战[完整版].part3

    《JavaEE开发的颠覆者: Spring Boot实战》从Spring 基础、Spring MVC 基础讲起,从而无难度地引入Spring Boot 的学习。涵盖使用Spring Boot 进行Java EE 开发的绝大数应用场景,包含:Web 开发、数据访问、安全控制...

    Angular-filter-products

    **Angular Filter Products** AngularJS,一个由Google维护的前端JavaScript框架,是开发动态Web应用程序的强大工具。...对于想要提升AngularJS技能或者学习数据过滤和呈现技巧的开发者来说,这是一个极好的实战案例。

    前端项目-ng-currency.zip

    1. **AngularJS 框架**:AngularJS 是一个MVC(模型-视图-控制器)架构的JavaScript框架,它允许开发者使用HTML作为模板语言并扩展HTML的语法来清晰地表达应用的组件。通过双向数据绑定,它自动保持视图和模型之间的...

Global site tag (gtag.js) - Google Analytics