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 ...
随机推荐
- Windows 2008 server R2安装.NET Framework4时提示“灾难性故障”解决
在安装行环境.NET Framework 4时无法安装,提示“灾难性故障”.服务器的操作系统是windows server 2008 R2. 查看系统日志时显示“无法安装 Windows 更新 &q ...
- 顶部图片放大回弹效果Scrollview ---- 各应用中常见的自定义View 解析
原理并不难. 代码量也不大. 非常简洁 . 先来个效果图 再上一波代码. public class SpecialScrollView extends ScrollView implements ...
- 基于Jquery easyui 选中特定的tab并更新
获取选中的 Tab // 获取选中的 tab panel 和它的 tab 对象 var pp = $('#tt').tabs('getSelected'); var tab = pp.panel('o ...
- 关闭C#主窗体弹出是否关闭对话框
在开发系统时,常常有这样一个问题,就是当关闭主窗体,也即退出系统时,如果想提示是否关闭,以免误操作,可以在主窗体的Main_FormClosing事件中添加一个对话框,代码如下: private vo ...
- 自动Telnet远程登陆命令
有些时候,在面对开发机的时候,不断的telnet和不断的command自己的命令确实非常麻烦,需要一些自动测试或者自动部署的需求.然而面对telnet很多同学都跟我一样一开始觉得无法通过管道等传用户名 ...
- 94 Binary Tree Inorder Traversal(二叉树中序遍历Medium)
题目意思:二叉树中序遍历,结果存在vector<int>中 解题思路:迭代 迭代实现: /** * Definition for a binary tree node. * struct ...
- 解决SQL Server Management Studio Express不支持更新全文目录的方法
微软的说法:https://msdn.microsoft.com/zh-cn/library/ms365247.aspx 可以用命令创建: A.创建唯一索引.全文目录和全文索引 以下示例对 Adven ...
- WebService cxf 接口中获得拦截器参数
1. 拦截器中put属性 Message message = PhaseInterceptorChain.getCurrentMessage(); message.put("AuthCode ...
- flvplayer.swf flv视频播放器使用方法
今天由于网页上要加入一个视频文件,就研究了一下flv视频播放器flvplayer.swf : 关于SewisePlayer 插件 演示例子链接 一.直接在html文件中加载: &l ...
- jdbc 连接mysql Communications link failure的解决办法
使用Connector/J连接MySQL数据库,程序运行较长时间后就会报以下错误: Communications link failure,The last packet successfully r ...