极客教程如何用Angular过滤器对数据进行分组
任务是展示如何用Angular过滤器对数据进行分组。
涉及的步骤:
1.你可以用这四种不同的方法来安装angular-filter。
- 克隆和构建https://github.com/a8m/angular-filter git仓库
- 通过Bower：从你的终端运行$ bower install angular-filter
- 通过npm：从你的终端运行$ npm install angular-filter。
通过npm安装
- 通过cdnjs：在你的应用程序中添加以下脚本源。
2.在你的index.html中包括angular-filter.js（或angular-filter.min.js），在包括Angular本身之后，如下例所示。
3.将’angular.filter’添加到你的主模块的依赖性列表中。
例子：在这个例子中，我们将使用angular-filter按狗的品种分组。
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.7/angular-filter.js">
</script>
<link rel="stylesheet" href=
"https://www.w3schools.com/w3css/4/w3.css">
<meta charset="utf-8">
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<p class="w3-jumbo w3-text-green pad"
align="center" style="margin: 0 0 0 0">
GeeksforGeeks
</p>
<p class="w3-large w3-text-green pad"
align="center">
A computer science portal for geeks
</p>
<ul>
<li ng-repeat=
"(key, value) in dogs | groupBy:'breed'">
Breed: {{ key }}
<ol>
<li ng-repeat="dog in value">
Dog name: {{ dog.name }}
</li>
</ol>
</li>
</ul>
<script type="text/javascript">
//(3)
angular.module('myApp', ['angular.filter'])
.controller('myCtrl', function (scope) {
scope.dogs = [
{ name: 'Alex', breed: 'German Shepherd' },
{ name: 'Rocky', breed: 'Bulldog' },
{ name: 'John', breed: 'Beagle' },
{ name: 'Paula', breed: 'Bulldog' },
{ name: 'Bobby', breed: 'German Shepherd' }
];
});
</script>
</body>
</html>
输出:
