博文一中的filter是angular自带的filter,一般不会满足我们的使用。我们可以自定义filter。
一、自定义filter实现反转字符串
<div>{{ceshi|reverse}}</div>
app.filter('reverse', function() {
return function(text) {
return text.split("").reverse().join("");
};
});
app.controller("crl", function($scope, $filter) {
$scope.ceshi="abcd";
});
效果为:dcba
二、使用多个filter
<div>{{ceshi|reverse|uppercase}}</div>
效果为:DCBA
三、在controller中使用filter
注入filter即可
<div>{{date}}</div>
<div>{{reverse}}</div>
app.controller("crl", function($scope, $filter) {
$scope.reverse = $filter('reverse')("abcd");
$scope.date = $filter('date')(new Date());
});
效果为
Aug 24, 2017
dcba
分享到:
相关推荐
**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 是一个强大的前端JavaScript框架,由Google维护,...通过学习这个实例,你可以了解到AngularJS的实战应用,并提升在创建交互式UI组件方面的技能。如果你对AngularJS感兴趣,这个案例将是一个很好的学习资源。
通过学习和实践这个"angularjs 开发实例",您将能够掌握如何构建一个完整的AngularJS应用,包括数据绑定、指令的使用、服务的调用以及路由的配置等。同时,这个实例也能帮助您了解如何将前端应用部署到服务器上进行...
#### 五、AngularJS实战案例分析 - **案例一:简单的待办事项应用**:构建一个能够添加、删除待办事项的简单应用,演示如何使用控制器、模型和视图来管理状态。 - **案例二:天气查询API调用**:使用$http服务来...
通过阅读《AngularJS权威教程》、《AngularJS开发下一代Web应用》和《AngularJS详细使用说明从零到高手》,你可以系统地学习和掌握AngularJS的核心知识和实战技巧,从而高效地开发下一代Web应用。无论是初学者还是有...
《AngularJS实战DEMO解析》 AngularJS,作为一款由Google维护的JavaScript框架,自2009年诞生以来,已经在Web开发领域产生了深远影响。它以其强大的数据绑定和依赖注入特性,为开发者构建动态、单页应用(SPA)提供...
### 二、AngularJS开发原则 1. **避免复用控制器**:每个控制器应负责一个小的视图区域,减少控制器间的耦合。 2. **避免在控制器中操作DOM**:DOM操作应在指令中完成,以保持控制器的纯净。 3. **避免数据格式化在...
总的来说,这个示例项目为学习如何在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 开发、数据访问、安全控制...
《JavaEE开发的颠覆者: Spring Boot实战》从Spring 基础、Spring MVC 基础讲起,从而无难度地引入Spring Boot 的学习。涵盖使用Spring Boot 进行Java EE 开发的绝大数应用场景,包含:Web 开发、数据访问、安全控制...
可以使用$http的GET方法向服务器请求数据,也可以利用AngularJS的过滤器(Filter)对已有数据进行筛选。视图中,ng-repeat指令用于遍历查询结果并展示。 在“boss”项目中,可能包含了实现这些功能的代码示例、HTML...
《JavaEE开发的颠覆者: Spring Boot实战》从Spring 基础、Spring MVC 基础讲起,从而无难度地引入Spring Boot 的学习。涵盖使用Spring Boot 进行Java EE 开发的绝大数应用场景,包含:Web 开发、数据访问、安全控制...
过滤器可以串联使用,例如`{{ value | filter1 | filter2 }}`,先通过`filter1`处理,再通过`filter2`处理。 ### 实战应用 在实际开发中,指令和过滤器常常结合使用,以实现复杂的UI逻辑和数据处理。例如,你可以...
通过学习和分析"Angular-filter-products"项目,开发者不仅可以掌握AngularJS的基本用法,还能深入了解过滤器的使用,以及如何结合动画效果来提升用户体验。对于想要提升AngularJS技能或者学习数据过滤和呈现技巧的...
JavaScript基础是学习AngularJS的前提,因为AngularJS是构建在JavaScript之上,并且使用了ECMAScript 5的特性。因此,理解函数、对象、闭包等基本概念是必要的。 总的来说,"Angular JS学习视频教程"将涵盖这些关键...