【学】AngularJS日记（4）- 过滤器的使用
过滤器：
- 过滤器中的
|json，可以使原来的json数据输出时按照换行的样式 - 过滤器
| limitTo:2可以截取字符串或者数组的前2位 - 过滤器
| orderBy可以进行排序，加入json里的key，就会根据这个key来排序，再加入一个参数true，就能逆排序
除了在标签里或者model里用过滤器，还可以在写JS或者JQ的区域通过
给controller注入$filter来直接在控制器里直接使用过滤器
<script type="text/javascript">
var app = angular.module('myApp',[]);
app.controller('cont1',['$scope','$filter',function($scope,$filter){
$scope.name = $filter('uppercase')('hello'); //将hello全部转成大写
$scope.number = $filter('number')('12392.8374',1); //限制一位小数
}]);
</script>
</head>
<body ng-controller="cont1">
{{name}}
{{number}}
</body>
我们也可以通过模块对象下的filter()方法，自定义一个过滤器
var app = angular.module('myApp',[]);
app.filter('firstUpper',function(){ //在app模块下调用filter方法来自定义过滤器，名字是firstUpper
return function(str，num){
return str.charAt(0).toUpperCase()+str.substring(1);
}
//这里的str，其实就是被使用过滤器的那个元素，这个过滤器的功能是将字符串的第一个字母大写
//另外，除了str，还可以传第二个参数，其实就是过滤器里用：隔开的第二个参数，当然，还可以加第三个或者更多
});
app.controller('cont1',['$scope',function($scope){
$scope.name = 'hello';
}]);
</script>
</head>
<body ng-controller="cont1">
{{name|firstUpper}}
</body>
同样，自定义的过滤器也可以直接在controller里的js中通过服务的方式调用，接着上面的例子
app.controller('cont1',['$scope','$filter',function($scope,$filter){
$scope.name = $filter('firstUpper')('hello'); //在controller中使用自定义的过滤器
}]);
- 下面这个例子是通过
ng-repeat和使用自带的过滤器来控制一个表格里的数据
var app = angular.module('myApp',[]);
app.controller('cont1',['$scope','$filter',function($scope,$filter){
$scope.data = [
{'name':'Victor','age':33},
{'name':'Mary','age':30},
{'name':'Qinyu','age':4},
{'name':'Yushuang','age':58},
{'name':'Yongpin','age':62}
];
$scope.onOff = true; //定义一个scope下的变量，来实现正序和反序的切换
$scope.myOrder = function(str){
if ($scope.onOff) {
$scope.data = //使用angular自带的orderBy过滤器， $filter('orderBy')($scope.data,str,true);
}else{
$scope.data = $filter('orderBy')($scope.data,str);
}
$scope.onOff = !$scope.onOff;
};
}]);
</script>
</head>
<body ng-controller="cont1">
<table border="1">
<thead>
<tr>
<th ng-click="myOrder('name')">姓名</th> <!--点击这个表头标题，可以调用myOrder函数来排序，当然，可以根据传参的不同来根据不同关键字排序-->
<th ng-click="myOrder('age')">年龄</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in data">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</tbody>
下面这个例子是在上面的基础上增加一个搜索功能，用到的技能有
- 通过将原始数据保留，model的数据被赋值原始数据，这样筛选filter后的数据不会改变原始数据
- 过滤器中filter方法的使用
<script type="text/javascript">
var app = angular.module('myApp',[]);
app.controller('cont1',['$scope','$filter',function($scope,$filter){
$scope.oriData = [ //这是原始数据，不要在使用filter方法时去改变它
{'name':'Victor','age':33},
{'name':'Mary','age':30},
{'name':'Qinyu','age':4},
{'name':'Yushuang','age':58},
{'name':'Yongpin','age':62}
];
$scope.data = $scope.oriData; //可以在这里将原始数据赋值给model数据data
//这里添加筛选功能，使用filter这个方法，第一个参数放要从哪个数据源中筛选，第二个参数写的是根据哪个关键字
$scope.mySearch = function(){
$scope.data = $filter('filter')($scope.oriData,$scope.searchContent);
};
}]);
</script>
</head>
<body ng-controller="cont1">
<!--这里要给输入框添加ng-model要写搜索的关键字-->
<input type="text" ng-model="searchContent"><button ng-click="mySearch()">搜索</button>
<table border="1">
......
......
【学】AngularJS日记（4）- 过滤器的使用的更多相关文章
- 前端MVC学习总结——AngularJS验证、过滤器
前端MVC学习总结--AngularJS验证.过滤器 目录 一.验证 二.过滤器 2.1.内置过滤器 2.1.1.在模板中使用过滤器 2.1.2.在脚本中调用过滤函数 2.2.自定义过滤器 三.指令( ...
- 【pwn】学pwn日记——栈学习（持续更新）
[pwn]学pwn日记--栈学习(持续更新) 前言 从8.2开始系统性学习pwn,在此之前,学习了部分汇编指令以及32位c语言程序的堆栈图及函数调用. 学习视频链接:XMCVE 2020 CTF Pw ...
- 【pwn】学pwn日记（堆结构学习）
[pwn]学pwn日记(堆结构学习) 1.什么是堆? 堆是下图中绿色的部分,而它上面的橙色部分则是堆管理器 我们都知道栈的从高内存向低内存扩展的,而堆是相反的,它是由低内存向高内存扩展的 堆管理器的作 ...
- 【学】AngularJS日记（3）- $apply(), run()方法
$scope.$apply()方法可以强制$apply()里运行的函数所改变的model里的数据直接反应到view里,因为在angular的环境中,有时会用到原生js或者jquery的时候,这些行为有 ...
- 【学】AngularJS日记（2）
数组循环放到新生成的li中 <ul ng-init="arr=[12,5,6,394,344]"> <li ng-repeat="item in arr ...
- 【学】AngularJS日记（1） - 常用工具
angular.isArray(a) 判断a是否为数组 angular.isDate 是否为时间对象 angular.isDefined 判断元素是否存在 angular.isUndefined an ...
- 前端MVC学习总结（二）——AngularJS验证、过滤器、指令
一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...
- angularjs之filter过滤器
现在公司用ionic,就是基于angularjs封装了一些api用于webapp,最近用的angularjs的filter确实省了很多代码,现在总结一下! ng比较鸡肋的过滤器,这里就一笔带过吧!鸡汤 ...
- AngularJS中的过滤器
欢迎大家指导与讨论 : ) 一.前言 AngularJS的过滤器能够将数据在被指令处理到显示在视图之前进行处理和转换.而且,过滤器不会修改作用域中的数据本身,即过滤器会保证数据的完整性.这样子能够允许 ...
随机推荐
- 探索软件工程道路上的我II (Θ∀Θ＃)
------作业要求------ 第一版本程序Prog1:+ 给定一个数组,实现数组元素求和:具体要求:实现对一维数组(a[100])的所有元素相加运算.+ 数据准备:a)数组长度:100:b)数组数 ...
- array_unshift() 、
定义和用法 array_unshift() 函数在数组开头插入一个或多个元素. 被加上的元素作为一个整体添加,这些元素在数组中的顺序和在参数中的顺序一样. 该函数会返回数组中元素的个数. 语法 arr ...
- C# 字符编码类Encoding
在网络通信中,很多情况下都是将字符信息转成字节序列进行传输.将字符序列转为字节序列的过程称为编码.当这些字节传送到接收方,接收方需要逆向将字节序列转为字符序列.这个过程就是解码. 常见编码有ASCII ...
- 基于云计算Iaas平台的ZStack
2015年4月,一家全新的基础架构即服务的软件产品ZStack面世.ZStack的主创人员是自在海外云计算公司的中国人.ZStack是基于Java语言,结合了OpenStack和CloudStack上 ...
- Chp10 10.7
<Java语言程序设计>P296 本章是关于对象的思考,主要是在研究面向对象的程序设计时类的设计,作业写得比较杂乱,构造方法时没有严格遵守类的流行设计风格,由于是作业,再加上比较简单,没有 ...
- 请求网络get
package com.baidu.net; import java.io.IOException; import org.apache.http.HttpEntity;import org.apac ...
- Xcode中创建文件夹
如果在xcode工程中new group,只是在视觉效果上分好了几个文件夹,方便分类管理,但在finder中并不会创建新的文件夹,在硬盘目录还是所有文件都并列在一个文件夹内,更恶心的是当你重新打开工程 ...
- Linux防火墙简介及iptables的基本使用
一.防火墙基础知识 iptables/netfilter:网络防火墙,连接追踪(状态检测) netfilter:工作内核中,让规则能够生效的网络框架(framework) iptables:防火墙规则 ...
- [马哥学习笔记]Linux系统裁剪之制作带网络功能的可启动linux
知识基础: 系统启动流程:POST-->BIOS(boot sequence)-->GRUB(bootloder(stage1:MBR;stage2:grub目录中))-->kern ...
- LeetCode-Search in Rotated Sorted Array
Suppose a sorted array is rotated at some pivot unknown to you beforehand. (i.e., 0 1 2 4 5 6 7 migh ...