您的位置：首页 > Web前端 > AngularJS

AngularJS学习记录-过滤器(排序方式过滤)

2016-05-05 21:02 671 查看

AngularJS学习记录-过滤器(排序方式过滤)

(1)功能描述

在页面的视图模板中，调用排序过滤器，将显示的数据按”score”属性值降序进行排列，并且值显示前3条数据记录。

(2)实现代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ng-repeat</title>
<script src="../js/angular.min.js"></script>
<style>
body{
font-size:12px;
}
ul{
list-style-type: none;
width: 408px;
margin:0;
padding:0;
}
ul li{
float: left;
padding:5px 0;
}
ul .odd{
color:#0026ff;
}
ul .even{
color:#ff0000;
}
ul .bold{
font-weight: bold;
}
ul li span{
width: 52px;
float:left;
padding:0 10px;
}
ul .focus{
background-color:#cccccc;
}
</style>
</head>
<body ng-app="app" ng-controller="myCtr">

<div>
<ul>
<li ng-class="{{bold}}">
<span>序号</span>
<span>姓名</span>
<span>性别</span>
<span>年龄</span>
<span>分数</span>
</li>
<li ng-repeat="stu in data | orderBy:'-score' | limitTo:3" ng-class-odd="'odd'" ng-class-even="'even'">
<span>{{$index + 1}}</span>
<span>{{stu.name}}</span>
<span>{{stu.sex}}</span>
<span>{{stu.age}}</span>
<span>{{stu.score}}</span>
</li>
</ul>
</div>

</body>
<script>
v
4000
ar app = angular.module('app',[]);

app.controller('myCtr',['$scope',function($scope){

$scope.bold = 'bold';
$scope.data = [
{name : "小明",sex : "男",age : 24,score : 88},
{name : "张东",sex : "男",age : 21,score : 90},
{name : "小花",sex : "女",age : 25,score : 95},
{name : "张蕾",sex : "女",age : 19,score : 86}
]

}])

</script>

</body>
</html>

(3)源码分析

当视图模板的”ng-repeat”指令绑定控制器的数据时，调用了orderBy过滤器。

<li ng-repeat="stu in data | orderBy:'-score' | limitTo:3" ng-class-odd="'odd'" ng-class-even="'even'">

在代码中，第一个”|”的左侧未数组data，右侧是过滤器的名称”orderBy”，表示排序过滤器，在该过滤器的右侧”:”代表传入的参数，”-score”，代表按照score的属性进行排序，而”-“是代表降序，不带”-“代表升序。

而第二个”|”的右侧的过滤器名称”limitTo”，用于设置数据显示时的记录总量，具体的总量值通过”:”后面的数值来制定。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航