How to Create Custom Filters in AngularJs
http://www.codeproject.com/Tips/829025/How-to-Create-Custom-Filters-in-AngularJs
Introduction
Filter in Angular JS is a way that will help you to represent your data in View in a certain format. There are many inbuilt filters provided by Angular js that give us the way to format our data in View. With these inbuilt filters, we can format & show our data in various ways. Text can be shown in uppercase, lowercase. Date can be also represented in various formats. All we need to do it is add a "|" (pipe) after the data.
Example: {{ 'Hello World' | uppercase }}
We can also create custom filter to display our data in a particular way that we want.
Let's see how we can create a custom filter. I am going to implement a custom filter, which reverses the input entered in a text box.
How to Create Custom Filters
//Initialize your ng-app
var myapp = angular.module('MyApp', []); //Create a Filter
myapp.filter("reversetext", function() { //Defining the filter function
return function(input) { var result = "";
input = input || ""; for (var i=0; i<input.length; i++) {
result = input.charAt(i) + result;
} return result;
};
});
Now Use the Filter in your View with HTML
<body ng-app="MyApp">
<input type="text" ng-model="text" placeholder="Enter text"/>
<p>Filtered Reverse Input: {{ text | reversetext }}</p>
</body>
How to Create Custom Filters in AngularJs的更多相关文章
- [转]How to Create Custom Filters in AngularJs
本文转自:http://www.codeproject.com/Tips/829025/How-to-Create-Custom-Filters-in-AngularJs Introduction F ...
- Part 20 Create custom service in AngularJS
Whenever the case changes from lower to upper, a single space character should be inserted. This mea ...
- Part 13 Create a custom filter in AngularJS
Custom filter in AngularJS 1. Is a function that returns a function 2. Use the filter function to cr ...
- create custom launcher icon 细节介绍
create custom launcher icon 是创建你的Android app的图标 点击下一步的时候,出现的界面就是创建你的Android的图标 Foreground: ” Foregro ...
- How to: Create Custom Configuration Sections Using ConfigurationSection
https://msdn.microsoft.com/en-us/library/2tw134k3.aspx You can extend ASP.NET configuration settings ...
- java中如何创建自定义异常Create Custom Exception
9.创建自定义异常 Create Custom Exception 马克-to-win:我们可以创建自己的异常:checked或unchecked异常都可以, 规则如前面我们所介绍,反正如果是chec ...
- [转]Create Custom Exception Filter in ASP.NET Core
本文转自:http://www.binaryintellect.net/articles/5df6e275-1148-45a1-a8b3-0ba2c7c9cea1.aspx In my previou ...
- [Angular] Create custom validators for formControl and formGroup
Creating custom validators is easy, just create a class inject AbstractControl. Here is the form we ...
- Create Custom Modal Dialog Windows For User Input In Oracle Forms
An example is given below to how to create a modal dialog window in Oracle Forms for asking user inp ...
随机推荐
- 国内各IE内核浏览器所调用的IE版本--转了
60浏览器,腾讯浏览器,世界之窗,遨游…IE的套套浏览器真是到处都是,在日常生活中,身边的朋友用的也不少,毕竟很多人对浏览器这东西不了解,在他们眼里,神马内核一点区别都没有,但咱们做前端的对这些东西可 ...
- 015_xml_函数
015_xml_函数 --环境准备******************************************************************* USE test --f:/t ...
- 局部线性嵌入(LLE)原理总结
局部线性嵌入(Locally Linear Embedding,以下简称LLE)也是非常重要的降维方法.和传统的PCA,LDA等关注样本方差的降维方法相比,LLE关注于降维时保持样本局部的线性特征,由 ...
- 卸载mysql时，如何卸载干净！
相信很多朋友在使用mysql的过程中都会遇到这样的问题,安装过程出错,或者想要换个版本,或者不想使用了,这个时候我们都需要完全卸载mysql呢?下面,就来谈一谈我的经验. 1.控制面板——>所有 ...
- php 与 ajax 获取123的案例
同事问我,咱们从数据库里面获取数据,用ajax的方式展示到前台页面.啥都不说了,动手写个案例吧. 1,建立一个页面: <!DOCTYPE html PUBLIC "-//W3C//DT ...
- PHP PDO获取结果集
一.介绍PDO获取结果集,不得不介绍一下PDO是如果执行SQL语句,一般情况下分三种, 1.query()方法 query()方法通常用于返回执行查询后的结果集.语法是这样的:PDOStatement ...
- 【USACO 1.1.2】贪婪的送礼者
[题目描述] 对于一群(NP个)要互送礼物的朋友,GY要确定每个人送出的钱比收到的多多少. 在这一个问题中,每个人都准备了一些钱来送礼物,而这些钱将会被平均分给那些将收到他的礼物的人. 然而,在任何一 ...
- 支持mdev的init脚本片断
mount -t tmpfs mdev /dev mount -t sysfs sysfs /sys mkdir /dev/pts mount -t devpts devpts /dev/pts ec ...
- （转）QT常用快捷键
F1 查看帮助F2 跳转到函数定义(和Ctrl+鼠标左键一样的效果)Shift+F2 声明和定义之间切换F4 头文件和源文件之间切换Ctrl+1 ...
- w3wp异常
相信做ASP.NET中大型Web应用的人都碰到过OutOfMemoryException这个异常,对于这个问题我研究了很久,在微软的技术文档上也了解过此问题出现的原因,说实话,到目前我仍然没有完美的解 ...