1. Puede instalar el filtro angular utilizando estos cuatro métodos diferentes:
- Clonar y construir https://github.com/a8m/angular-filter repositorio git
- Vía Bower: ejecutando $bower install angular-filter desde su terminal
- Vía npm: ejecutando $npm install angular-filter desde su terminal.
Instalación a través de npm
- A través de cdnjs: agregue el siguiente script-src a su aplicación.
2. Incluya angular-filter.js (o angular-filter.min.js) en su index.html, después de incluir Angular como se muestra en el siguiente ejemplo.
3. Agregue ‘angular.filter’ a la lista de dependencias de su módulo principal.
Ejemplo: En este ejemplo, agruparemos perros por sus razas usando un filtro angular.
HTML
<!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>
Producción:
Publicación traducida automáticamente
Artículo escrito por abhishekkharmale y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA