`

AngularJS实战之filter的使用二

阅读更多
博文一中的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
1
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 是一个强大的前端JavaScript框架,由Google维护,...通过学习这个实例,你可以了解到AngularJS的实战应用,并提升在创建交互式UI组件方面的技能。如果你对AngularJS感兴趣,这个案例将是一个很好的学习资源。

    angularjs 开发实例

    通过学习和实践这个"angularjs 开发实例",您将能够掌握如何构建一个完整的AngularJS应用,包括数据绑定、指令的使用、服务的调用以及路由的配置等。同时,这个实例也能帮助您了解如何将前端应用部署到服务器上进行...

    AngularJS快速入门教程

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

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

    通过阅读《AngularJS权威教程》、《AngularJS开发下一代Web应用》和《AngularJS详细使用说明从零到高手》,你可以系统地学习和掌握AngularJS的核心知识和实战技巧,从而高效地开发下一代Web应用。无论是初学者还是有...

    angularjsDEMO

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

    AngularJS实用开发技巧(推荐)

    ### 二、AngularJS开发原则 1. **避免复用控制器**:每个控制器应负责一个小的视图区域,减少控制器间的耦合。 2. **避免在控制器中操作DOM**:DOM操作应在指令中完成,以保持控制器的纯净。 3. **避免数据格式化在...

    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 开发、数据访问、安全控制...

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

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

    angular 学习,增删改查

    可以使用$http的GET方法向服务器请求数据,也可以利用AngularJS的过滤器(Filter)对已有数据进行筛选。视图中,ng-repeat指令用于遍历查询结果并展示。 在“boss”项目中,可能包含了实现这些功能的代码示例、HTML...

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

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

    AngularJs:Angular JS指令和过滤器

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

    Angular-filter-products

    通过学习和分析"Angular-filter-products"项目,开发者不仅可以掌握AngularJS的基本用法,还能深入了解过滤器的使用,以及如何结合动画效果来提升用户体验。对于想要提升AngularJS技能或者学习数据过滤和呈现技巧的...

    Angular js学习视频教程

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

Global site tag (gtag.js) - Google Analytics