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 ...
随机推荐
- js求字符长度
</script> <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- IDisposable接口详解
转载:http://www.cnblogs.com/davyli/archive/2010/09/13/1825042.html 正确实现 IDisposable .NET中用于释放对象资源的接口是I ...
- 创建一个流（Stream）可以让Bitmap或Image保存到流里面（转）
创建一个流(Stream)可以让Bitmap或Image使用save方法将已经在bitmap上生成的图像 保存到流里面?不需要直接在硬盘上生成文件 -------------------------- ...
- linux 进程数
一.linux系统支持的最大进程数 限制1:既然系统使用pid_t表示进程号,那么最大进程数不能超过pid_t类型的最大值吧 限制2:使用命令ulimit -u查看系统中限制的最大进程数,我的机器上是 ...
- 【BZOJ1901】Dynamic Rankings
Description 给定一个含有n个数的序列a[1],a[2],a[3]……a[n],程序必须回答这样的询问:对于给定的i,j,k,在a[i],a[i+1],a[i+2]……a[j]中第k小的数是 ...
- Xshell下漂亮的开发环境配置
今天折腾了一天Xshell配置Linux命令行开发环境. 总结几点: 1.Xshell配色方案,这是我自己调的个人使用版,网上比较好的版本有Solarized Dark,可以下载到. [ColorFo ...
- .ctor，.cctor 以及 对象的构造过程
摘要: .ctor,.cctor 以及 对象的构造过程.ctor:简述:构造函数,在类被实例化时,它会被自动调用.当C#的类被编译后,在IL代码中会出现一个名为.ctor的方法,它就是我们的构造函数, ...
- 请给出异步加载js方案
请给出异步加载js方案,不少于两种 默认情况javascript是同步加载的,也就是javascript的加载时阻塞的,后面的元素要等待javascript加载完毕后才能进行再加载,对于一些意义不是很 ...
- Memcached源码分析——slab的初始化
以下内容仅为本人的笔记. /** * Determines the chunk sizes and initializes the slab class descriptors * according ...
- linux c redirect 重定向
用execvp实现时,运行adb,如果adb 服务没有启动,会启动adb服务,启动adb服务时,pipe返回的管道在读的时候堵塞了. 查看了popen的源码,发现popen是用sh -c来执行的,避免 ...