Angular 中的filtre个人理解,就是这么个东西,如字面意思,过滤器,是将一个变量过滤(处理)一下,返回处理后的变量,如{{people | FilterName:para}},FilterName是过滤器的名字,people是其要处理的变量,para是可选的参数。其实,FilterName是一个函数,其返回值也是一个函数,people和para是这个返回值的参数。下面看一下具体的例子:
filter.html
<html>
<title>Test Filter</title>
<head>
<script src='E:\Angularjs\angular-1.0.8\angular.js'></script>
<script src='E:\filter.js'></script>
</head>
<body ng-app='filter' ng-controller='FilterController'>
[list]
<li ng-repeat='people in peoples' style='background-color:{{people.name[0] | SelectName}}'>
{{people.name}}
</li>
[/list]
</body>
</html>
filter.js
function FilterController($scope){
$scope.peoples = [{'name':'A1'},{'name':'A2'},{'name':'A3'},{'name':'B1'},{'name':'B2'},{'name':'B3'},{'name':'C1'},{'name':'C2'},{'name':'C3'},{'name':'D1'},{'name':'D2'},{'name':'D3'}];
}
angular.module('filter',[]).controller('FilterController',FilterController).filter('SelectName',function(){
var color = function(name){
switch(name){
case 'A':return 'red';
case 'B':return 'green';
case 'C':return 'blue';
case 'D':return 'yellow';
}
}
return color;
});
如filter.js中的filter这一块可以看出,自定义了一个名为SelectName的filter,程序中'SelectName'后的function是这个filter的函数体,在其内部定义了一个匿名函数,并将其赋值给color,最后返回这个color,也就是返回这个匿名函数。
接下来看一下这个函数实现的功能:根据name的不同值返回不同的颜色。
看一下filter.html中是如何调用的:有ng-repeat属性的<li>标签,是controller中$scope.peoples的列表,但并不是单纯的列出来,而是根据$scope.peoples中每个people的名字的第一个字母来显示不同的颜色,这就用到了上面写的行内样式过滤器:style='background-color:{{people.name[0] | SelectName}}'
解释一下,SelectName会返回名为color函数,然后people将其name下标为0的元素传入到这个函数中,函数处理完后将结果return到background-color后面,这样,<li>标签就显示出了不同的颜色.
分享到:
相关推荐
NULL 博文链接:https://macleo.iteye.com/blog/1045211
数学:吃透课本温故知新.docx
机械军工行业:“温故知新”系列之工业机器人行业复盘(二):从美国汽车行业“2mm工程”看工业机器人国产化空间.pdf
通信行业:温故知新,从4G看5G-1202-中信建投-12页.pdf
固定收益专题报告:温故知新,国债期货1903合约回顾与总结_国信证券-13页.pdf
农林牧渔行业专题研究:温故知新,复盘上两轮生猪疫情影响-0213-广发证券-17页.pdf
类固收系列报告之四:温故知新,新股首日涨幅预测模型及卖出策略-0511-光大证券-23页.pdf
20210202-银河证券-“温故知新”系列之工业机器人行业复盘(二):从美国汽车行业“2mm工程”看工业机器人国产化空间.pdf
温故知新ASP.NET 2.0(C#)温故知新ASP.NET 2.0(C#)温故知新ASP.NET 2.0(C#)温故知新ASP.NET 2.0(C#)温故知新ASP.NET 2.0(C#)
纺织服装行业“温故知新”系列之百丽复盘:渠道为王铸就龙头,改革初见成效-0717-华泰证券-26页.pdf
5G行业发展报告,证券研究报告
SpringSpringSpring温故知新六AOP向切面程Spring温故知新六AOP向切面程
机械军工行业:“温故知新”系列之工业机器人行业复盘-从日德韩发展历程看中国工业机器人的未来.pdf
计算机小数表示.温故知新.pdf
初中语文文学讨论现当代文学温故知新
“温故知新”系列之工业机器人行业复盘(三):从零部件国产化看产业链协同发展(附报告).pdf
“温故知新”系列之工业机器人行业复盘(二):从美国汽车行业“2mm工程”看工业机器人国产化空间
中信建设温故知新,从 4G 看 5G.rar
中信建设温故知新,从 4G 看 5G.pdf