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 ...
随机推荐
- AmazeUI 模态框封装
/** * 模态窗口 */ window.Modal = { tpls:{ alert:'<div class="am-modal am-modal-alert" tabin ...
- java 类处理工具
public class ClassUtils { private static final Logger LOGGER = LoggerFactory.getLogger(ClassUtils.cl ...
- html.ex.day02
1.同一个目录内页面跳转 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...
- 使用WMI来连接远端计算机
1. wmi连接前提 利用wmi来连接远端计算机首先要具有远端计算机管理员的用户名和密码.如果计算机在域中的话,要有域管理员用户名和密码,或者是把域帐户加入本机管理员组中也可以. 2. 相关类的用法- ...
- 02C#基础(1)
1.关键字 C#中定义了很多关键字,关键字是构成C#基本语法的,不用去背,用的多就记住了 2.标识符 标识符是用来给类.方法.变量等命名的 命名规则: (1)由字母.中文(不推荐).数字.下划线组成 ...
- Delphi 动态改变Rzsplitter的Orientation(方向)属性
效果图: 原先不知道,弄了半天都改不了RzSplitter.Orientation = orHorizontal / orVertical 然后去查该组件的源代码,原来Orientation不是在Rz ...
- [个人原创]关于java中对象排序的一些探讨（一）
有的时候我们需要将自己定义的对象,有序输出.因为一般我们程序的中间结果需要存储在容器里,那么怎样对容器中的对象按照一定次序输出就是程序员经常需要考虑的问题.本片文章探讨了怎样有序化输出容器中的对象的问 ...
- C#防SQL注入代码的实现方法
对于网站的安全性,是每个网站开发者和运营者最关心的问题.网站一旦出现漏洞,那势必将造成很大的损失.为了提高网站的安全性,首先网站要防注入,最重要的是服务器的安全设施要做到位. 下面说下网站防注入的几点 ...
- CodeForces 546C（队列）
CodeForces 546C Soldier and Cards Time Limit:2000MS Memory Limit:262144KB 64bit IO Format:%I ...
- js 冒泡事件的处理
onMouseOver 和 onMouseOut事件冒泡 当事件在某一DOM元素被触发时,例如用户在某个节点上点击鼠标,事件将跟随着该节点继承的各个父节点冒泡穿过整个DOM的节点层次,直到它遇到依附有 ...