一、格式化数字为货币格式。
<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
分享到:
相关推荐
**AngularJS实战PDF**是一本深入探讨AngularJS框架的实战指南,旨在帮助开发者掌握这个强大的JavaScript框架,并在实际项目中应用。AngularJS是由Google维护的一个开源项目,它为构建动态Web应用提供了丰富的功能和...
**AngularJS实战之ng-repeat的详细用法** AngularJS,作为一个强大的前端JavaScript框架,由Google维护,被广泛用于构建交互式、数据驱动的Web应用程序。其中,`ng-repeat`指令是AngularJS中的核心功能之一,它允许...
在本项目"Social-Network:AngularJS 实战项目"中,我们将深入探讨使用AngularJS构建一个社交网络平台的全过程。AngularJS是Google维护的一个强大的前端JavaScript框架,它为开发复杂Web应用提供了丰富的功能和结构。...
本文将详细介绍AngularJS中filter的使用,通过实例讲解各种常见场景下的filter应用。 一、格式化数字为货币格式 数字的货币格式化是一个常见的需求,AngularJS提供的currency过滤器可以非常方便地实现这一功能。...
- AngularJS的双向数据绑定是其核心特性之一。地区数据可能存储在一个服务(Service)或工厂(Factory)中,通过`$http`服务从服务器获取,然后绑定到视图上。 - 地区数据结构可能是树状的,每个节点代表一个区域...
1. **双向数据绑定**:这是AngularJS最显著的特点之一,它使得视图和模型之间的数据自动同步。任何一方的更改都会立即反映到另一方,减少了手动同步数据的繁琐工作。 2. **依赖注入**(Dependency Injection, DI)...
#### 五、AngularJS实战案例分析 - **案例一:简单的待办事项应用**:构建一个能够添加、删除待办事项的简单应用,演示如何使用控制器、模型和视图来管理状态。 - **案例二:天气查询API调用**:使用$http服务来...
1. **数据绑定**:AngularJS的数据绑定是其最显著的特性之一,允许开发者在视图和模型之间建立双向绑定,自动同步两者的变化。这减少了手动操作DOM的复杂性,提升了代码的可读性和维护性。 2. **指令系统**:...
《AngularJS实战DEMO解析》 AngularJS,作为一款由Google维护的JavaScript框架,自2009年诞生以来,已经在Web开发领域产生了深远影响。它以其强大的数据绑定和依赖注入特性,为开发者构建动态、单页应用(SPA)提供...
1. **放弃IE8支持**:AngularJS不支持过时的Internet Explorer 8,因此在开发过程中应确保目标用户群使用的是较新的浏览器。 2. **四大核心特性**: - **MVC**:Model-View-Controller架构,将应用程序分为模型、...
总的来说,这个示例项目为学习如何在AngularJS中实现表格内容的搜索和过滤提供了一个实战平台。开发者可以通过研究代码,了解如何利用AngularJS的特性来创建动态交互的web应用,特别是在处理大量数据展示和用户搜索...
标题中的“angular-with-odata-example”表明这是一个关于使用AngularJS框架与OData协议进行数据交互的示例项目。AngularJS是Google维护的一款强大的前端JavaScript框架,用于构建动态Web应用程序。而OData(开放...
《JavaEE开发的颠覆者: Spring Boot实战》从Spring 基础、Spring MVC 基础讲起,从而无难度地引入Spring Boot 的学习。涵盖使用Spring Boot 进行Java EE 开发的绝大数应用场景,包含:Web 开发、数据访问、安全控制...
在AngularJS中,数据绑定是其核心特性之一,允许开发者将视图与模型直接关联,使得UI的更新与数据模型的变化同步。在增删改查场景中,我们通常会创建一个控制器(Controller)来管理业务逻辑,它与视图(View)通过...
过滤器可以串联使用,例如`{{ value | filter1 | filter2 }}`,先通过`filter1`处理,再通过`filter2`处理。 ### 实战应用 在实际开发中,指令和过滤器常常结合使用,以实现复杂的UI逻辑和数据处理。例如,你可以...
《JavaEE开发的颠覆者: Spring Boot实战》从Spring 基础、Spring MVC 基础讲起,从而无难度地引入Spring Boot 的学习。涵盖使用Spring Boot 进行Java EE 开发的绝大数应用场景,包含:Web 开发、数据访问、安全控制...
《JavaEE开发的颠覆者: Spring Boot实战》从Spring 基础、Spring MVC 基础讲起,从而无难度地引入Spring Boot 的学习。涵盖使用Spring Boot 进行Java EE 开发的绝大数应用场景,包含:Web 开发、数据访问、安全控制...
**Angular Filter Products** AngularJS,一个由Google维护的前端JavaScript框架,是开发动态Web应用程序的强大工具。...对于想要提升AngularJS技能或者学习数据过滤和呈现技巧的开发者来说,这是一个极好的实战案例。
1. **AngularJS 框架**:AngularJS 是一个MVC(模型-视图-控制器)架构的JavaScript框架,它允许开发者使用HTML作为模板语言并扩展HTML的语法来清晰地表达应用的组件。通过双向数据绑定,它自动保持视图和模型之间的...