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 ...
随机推荐
- div如何加滚动条
<div style="position:absolute; height:400px; overflow:auto"></div>div 设置滚动条显示: ...
- HTML5 离线缓存详解（转）
离线缓存是html5新特性之一,简单理解就是第一次加载后将数据缓存,在没有清除缓存前提下,下一次没有网络也可以加载,用在静态数据的网页或游戏比较好用.当然,Html5新的特性都不是所有浏览器都能支持的 ...
- javascript判断值是否undefined
function isUndefined(variable) { return typeof variable == 'undefined' ? true : false; }
- Android ScrollView 不能滚动但是有滚动条
如果一切都检查完毕,没有任何设置为不能滚动,而且outouch事件也没有被拦截的话,那么在布局文件中检查下是否在ScrollView中的子View中设置了margin_top属性.如果设置了,那么Sc ...
- c - 字符串的反转
1,递归实现 // 递归实现字符串反转(可通过栈的调用来加深理解). char * reverse(char *c) { if(!c) return NULL; int len = strlen(c) ...
- Swift - 06 - 数值类型转换和类型别名
//: Playground - noun: a place where people can play import UIKit var str = "Hello, playground& ...
- 设置windows窗口ICON 【windows 编程】【API】【原创】
1. ICON介绍 最近开始接触windows 编程,因此将自己所接触的一些零散的知识进行整理并记录.本文主要介绍了如何更改windows对话框窗口的ICON图标.这里首先介绍一下windows IC ...
- php中的双引号和单引号的区别？
1.单引号里面的字符串直接全部转义,原样输出(即:单引号内部的变量不会被执行) 2.双引号里面的变量会被替换(即:变量会执行) 例如:$name = 'hello';echo "the $n ...
- C#解析JSON几种方式-整理
一.什么是JSON JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于JavaScript(Standard ECMA-262 3rd Edition ...
- 来晚了--SALTSTACK要弄起
PUPPET就算了,我多少都有PYTHON基础,还是专SALTSTACK吧. 今天小玩玩,以后深入.