Angular过滤器
angular中的过滤器有:
currency 过滤货币
number 过滤数字,
date 过滤日期
json 把js对象过滤为json字符串
limitTo 截取字符串,参数是正数则从左往右截取,负数从末尾开始数起,没有0,从1开始
lowercase 把字符串转为小写
uppercase 把字符串转为大写
orderBy 根据给定的对象的属性名对对象进行排序,可以升序也可以降序 参数为 true false
filter 根据参数过滤数组或者对象,如果参数是一个字符串,那么可以过滤出数组中包含这个字符串的元素。
$filter 在脚本中写过滤器
.filter 自定义过滤器
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
span{
display:inline-block;
font-weight:bold;
font-size:20px;
margin-right:10px;
}
</style>
<script src="../../Angular/angular.min.js"></script>
</head>
<body>
<div ng-controller="myController">
<p><span>currency => </span>{{123.5555555|number:1|currency:"¥"}}</p>
<p>{{name}}</p> <h2>日期</h2>
<p>{{today | date:"yyyy:MM:dd:HH:mm:ss.sss"}}</p> <h2>json</h2>
<p>{{obj|json}}</p> <h2>limitTo</h2>
{{arr| limitTo:-1}} <h2>orderBy</h2>
<p>{{arrObj|orderBy:"name":true}}</p> <h2>自定义过滤器</h2>
<p>{{"aalkdfa"|zdy}}</p>
</div>
<script>
angular.module("myApp",[])
.controller("myController",function($scope,$filter,$interval){
$scope.name = $filter("uppercase")("aklkjjfhakfkha"); //日期
$interval(function(){
$scope.today = new Date();
},1); //json
$scope.obj = {
name:"chef",
age:"three"
} //limilTo
$scope.arr = ["1","3","3","8"]; //orderBy
$scope.arrObj = [
{name:"c",age:"22"},
{name:"w",age:"22"},
{name:"a",age:"22"},
{name:"b",age:"22"}
];
}) //自定义过滤器 input 是要过滤的字符串
.filter("zdy",function(){
return function(input){ //把第一个字符改为大写
return input[0] = input[0].toUpperCase()+input.slice(1);
}
})
</script>
</body>
</html>
Angular过滤器的更多相关文章
- Angular过滤器 自定义及使用方法
首先设置自定义过滤器. 定义模块名:angular .module('myApp') .filter('filterName',function(){ return function(要过滤的对象,参 ...
- angular过滤器基本用法
1.过滤器主要用于数据的筛选,可以直接在模板使用 语法: {{expression | filter}} {{expression | filter | filter2}} {{expression ...
- Angular 过滤器的简单使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- angular过滤器使用 自定义过滤器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...
- 如何angular过滤器进行排序???
首先定义一个json文件: 然后写HTML文件: <div id="box"> <!--第一个下拉框--> <select ng-model=&quo ...
- angular 过滤器(日期转换,时间转换,数据转换等)
(function() { 'use strict'; /** * myApp Module * * Description */ angular.module('myApp') .filter('i ...
- Angular 过滤器
<!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta ...
- 简话Angular 04 Angular过滤器详解
一句话: filter是万能的数据处理器,可以过滤数据,排序数据,删除数据,扩展数据 1. 内置filter大全 url: https://docs.angularjs.org/api/ng/filt ...
- angular过滤器在html和js中的使用
在HTML中使用格式为:{{数据 | 过滤器名称:条件一:条件二--}}:过滤条件间使用:隔开 例如: 在代码中一般格式为: 变量 = $filter("过滤器名称")(被过滤数 ...
随机推荐
- WinForm------TextEdit只能输入数字
代码: this.textEdit1.Properties.Mask.EditMask = @"\d+"; this.textEdit1.Properties.Mask.MaskT ...
- Unity自动打包 apk
1.流程 Unity打包 apk,会把Unity安装目录下的默认 AndroidManifest.Xml 文件覆盖到apk中去,同时还会拷贝该文件所在目录下的其它默认设置文件,如 res 和 asse ...
- 子类可以有跟父类中同名的方法,但是会重写父类中的方法,甚至是root class中的方法
/* 子类可以重写父类中的方法,甚至是root class中的方法,比如NSObeject 的new方法,但是后提示警告如下 Method is expected to return an insta ...
- Java开发规范摘录
对于规范的 JAVA 派生类,尽量用 eclipse工具来生成文件格式,避免用手写的头文件/实现文件. 尽量避免一行的长度超过 200 个字符,因为很多终端和工具不能很好处理之.缩进8格 ,impor ...
- CF memsql Start[c]UP 2.0 B
CF memsql Start[c]UP 2.0 B B. Distributed Join time limit per test 1 second memory limit per test 25 ...
- css3过渡效果
- 如何给Apache添加虚拟路径和虚拟主机?
在本地开发,一般只用一个Apache服务器,然后通过配置文件实现多个站点访问,要么是“虚拟路径(别名)”的形式,要么是“虚拟主机”的形式,相关配置参考如下: 说明:我给Apache设置的端口为:,即 ...
- jQuery-H5-css3转盘抽奖-遁地龙卷风
(-1)写在前面 这个idea不是我的,首先向这位前辈致敬. 我用的是chrome49, jquery3.0. 完整的程序案例在我的百度云盘http://pan.baidu.com/s/1jI2QSn ...
- UVA2037
#include<cstdio> int Sum(int n) { int sum=0; while(n!=0) { sum+=n%10; n/=10; } return sum; } v ...
- iOS开发——高级篇——音频、音乐播放(封装类)
一.简介 简单来说,音频可以分为2种音效又称“短音频”,通常在程序中的播放时长为1~2秒在应用程序中起到点缀效果,提升整体用户体验 音乐比如游戏中的“背景音乐”,一般播放时间较长 播放音频可以使用框架 ...