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 ...
随机推荐
- solr建立索引的过程
HttpSolrServer HttpSolrServer继承SolrServer 参考文档:http://my.oschina.net/qige/blog/173008
- 写一个基于NSURLSession的网络下载库
前段时间AFNetworking 更新到3.0 ,彻底废弃NSURLConnection的API转由NSURLSession来实现,代码并没有改动很大,AF封装的很好了,读完源码感觉收获很大. 下载不 ...
- Swift - 19 - 字典的初始化
//: Playground - noun: a place where people can play import UIKit // 注意: swift中的字典用的也是中括号, 和OC的大括号是不 ...
- MySQL 查询数据
MySQL 查询数据 MySQL 数据库使用SQL SELECT语句来查询数据. 你可以通过 mysql> 命令提示窗口中在数据库中查询数据,或者通过PHP脚本来查询数据. 语法 以下为在MyS ...
- linux术语解析（持续更新）
1.linux内核有个版本,分别是 longterm: 提供长期支持的内核版本 stable: 稳定版本 Beta 测试版
- sql批量插入数据之存储过程
-- ============================================= -- Author: jf_ou -- Create date: 2016/03/22 -- Desc ...
- C#.net 货币格式转换
/// <summary> /// 输入Float格式数字,将其转换为货币表达方式 /// </summary> /// <param name="ftype& ...
- websphere内存溢出，手动导出was的phd和javacore文件
网上有很多方法,ibm官方也提供了.但是,好奇怪,好像只有百度博客的一片文章提出要先设置环境条目或定制属性,否则命令不生效. 所以,转载博客的时候,你最好自己尝试一下,要不然你就是在害人害己!我测试了 ...
- ES5数组方法
先标明参考出处: http://blog.csdn.net/codebistu/article/details/8049705 本来写过一篇有关数组新方法的(详见: [转]JavaScript函数和数 ...
- php设计模式之简单工厂模式
①抽象基类:类中定义抽象一些方法,用以在子类中实现 ②继承自抽象基类的子类:实现基类中的抽象方法 ③工厂类:用以实例化所有相对应的子类 /** * * 定义个抽象的类,让子类去继承实现它 * */ a ...