`
HYFY
  • 浏览: 11782 次
  • 性别: Icon_minigender_1
  • 来自: 河北
文章分类
社区版块
存档分类
最新评论

温故知新:Angular 的 filter

javascripthtml 
阅读更多
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>标签就显示出了不同的颜色.
0
顶
0
踩
分享到：
| 温故知新:Angular 下的简单的 mvc 编码结 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics