`

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

相关推荐

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

    angular 学习,增删改查

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

    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学习视频教程"将涵盖这些关键...

    前端项目-ng-currency.zip

    2. **货币筛选器(Currency Filter)**:在AngularJS中,内置的`currency`筛选器用于格式化数字为货币形式。它接受一个值,将其转换为货币格式,并可以自定义货币符号。例如,`{{price | currency}}`会将`price`变量...

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

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

    AngularJSTrainingLabs:Angular JS 培训实验室

    在AngularJS中,你可以使用`{{ }}`双括号或者`ng-bind`指令将模型数据展示到视图上,反之亦然。 ### 3. 指令系统 AngularJS通过自定义指令扩展了HTML的功能,如`ng-repeat`用于循环渲染数据,`ng-if`控制元素的...

    jquery入门学习资料

    2. **实战项目**: 通过构建实际的小型网页应用,如图片轮播、下拉菜单或表单验证,可以巩固jQuery技能。 3. **jQuery插件**: 探索和使用现有jQuery插件,如jQuery UI、Bootstrap等,可以快速构建功能丰富的界面。 ...

    study:前端工程师研究

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

Global site tag (gtag.js) - Google Analytics