`

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
分享到:
评论

相关推荐

    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(开放...

    angular 学习,增删改查

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

    AngularJs:Angular JS指令和过滤器

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

    Angular-filter-products

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

    前端项目-ng-currency.zip

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

    Angular js学习视频教程

    JavaScript基础是学习AngularJS的前提,因为AngularJS是构建在JavaScript之上,并且使用了ECMAScript 5的特性。因此,理解函数、对象、闭包等基本概念是必要的。 总的来说,"Angular JS学习视频教程"将涵盖这些关键...

    Angular.JS_practice:在我寻求成为平均堆栈开发人员的过程中

    在“Angular.JS_practice-master”这个项目中,你可以找到一个完整的AngularJS实战案例,包括项目的结构、代码实现和功能模块。通过阅读源码和动手修改,你将更深入地理解AngularJS的工作原理及其在实际项目中的应用...

    AngularJSTrainingLabs:Angular JS 培训实验室

    这个“AngularJS Training Labs”项目是专为学习和实践AngularJS设计的一系列教程和实验,旨在帮助开发者深入理解AngularJS的核心概念和技术。 ### 1. AngularJS简介 AngularJS的核心理念是通过数据绑定和依赖注入...

    jquery入门学习资料

    1. **选择器**: jQuery 的核心功能之一是选择HTML元素,它的选择器语法类似CSS,如 `$("#id")` 选择ID为id的元素,`$(".class")` 选择所有类名为class的元素,`$("tagname")` 选择所有tagname标签。 2. **链式操作*...

    study:前端工程师研究

    这些资料可能涵盖了AngularJS的基本概念、核心API的使用、实战项目的实现,甚至可能有对版本更新的学习,如从AngularJS 1.x到Angular 2+的迁移。 学习AngularJS的过程中,不仅需要理解上述概念,还需要通过实际项目...

Global site tag (gtag.js) - Google Analytics