【学】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的过滤器能够将数据在被指令处理到显示在视图之前进行处理和转换.而且,过滤器不会修改作用域中的数据本身,即过滤器会保证数据的完整性.这样子能够允许 ...
随机推荐
- springMvc 报错
org.springframework.core.convert.ConversionFailedException: Failed to convert from type java.util.Ar ...
- strlen 字符型数组和字符数组 sizeof和strlen的区别 cin.get(input,Arsize)
strlenstrlen所作的仅仅是一个计数器的工作,它从内存的某个位置(可以是字符串开头,中间某个位置,甚至是某个不确定的内存区域)开始扫描,直到碰到第一个字符串结束符'\0'为止,然后返回计数器值 ...
- DataTable,DataGridVIew转换到xls 方法 （转）
private void dataTableToCsv(DataTable table, string file) { string title = ""; FileStream ...
- 实现TabelView的多个cell布局
- (void)viewDidLoad { [super viewDidLoad]; self.LabelArray=[[NSMutableArray alloc]initWithObjects:@& ...
- iOS－－基础控件总结一
UIWindow窗口 UIView视图 UIButten按钮 UILabel文本显示 UITextField输入框 UI TextView多行输入框 UISwitch开关 UISegmentedCon ...
- Chrome和IE中使用window.open函数
做前端开发的人员经常回遇到使用windows.open这个函数来打开一个新的网页窗口,使用这个函数的时候有些需要注意的地方,在Chrome和IE下该函数还是有一些细节性的区别. 以下是我在项目中使用的 ...
- PHP构造方法
构造方法 1.(特殊)对象创建完成后第一个自动调用的方法: 2.(特殊)方法名比较特殊,方法名可以与类相同: 3.给对象中的成员赋初始值: class boyfriend{ public $name; ...
- PAT (Advanced Level) Practise：1001. A+B Format
[题目链接] Calculate a + b and output the sum in standard format -- that is, the digits must be separate ...
- 项目里总结出来的log4j模板
项目日志模板:http://www.cnblogs.com/baibaluo/archive/2011/06/03/2072091.html#commentform #全局设置 log4j.rootL ...
- ABAP下载txt文件
IF NOT DOWN_F[] IS INITIAL. CASE DOWN_MODE . "下载模式是放在所选路径下的.TXT文档中 WHEN 'X' . CA ...