array - Cómo encadenar filtros AngularJS en el controlador.
ng-href angular 5 (3)
Además de aplicar filtros de manera explícita al resultado del anterior, también puede crear un objeto que encadene múltiples filtros.
Controlador
angular.module(''Demo'', []);
angular.module(''Demo'')
.controller(''DemoCtrl'', function($scope, $filter) {
$scope.order = ''calories'';
$scope.filteredFruits = $scope.fruits = [{ name: ''Apple'', calories: 80 }, { name: ''Grapes'', calories: 100 }, { name: ''Lemon'', calories: 25 }, { name: ''Lime'', calories: 20 }, { name: ''Peach'', calories: 85 }, { name: ''Orange'', calories: 75 }, { name: ''Strawberry'', calories: 65 }];
$scope.filterFruits = function(){
var chain = new filterChain($scope.fruits);
$scope.filteredFruits = chain
.applyFilter(''filter'', [{ name: $scope.filter }])
.applyFilter(''orderBy'', [ $scope.order ])
.value;
};
function filterChain(value) {
this.value = value;
}
filterChain.prototype.applyFilter = function(filterName, args) {
args.unshift(this.value);
this.value = $filter(filterName).apply(undefined, args)
return this;
};
});
Ver
<!doctype html>
<html ng-app="Demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="DemoCtrl">
<input type="text" ng-model="filter" ng-change="filterFruits()" placeholder="Filter Fruits" />
<select ng-model="order">
<option value="name">name</option>
<option value="calories">calories</option>
</select>
<div ng-repeat="fruit in filteredFruits">
<strong>Name:</strong> {{fruit.name}}
<strong>Calories:</strong> {{fruit.calories}}
</div>
</div>
</body>
</html>
Tengo pocos filtros a la vista
<tr ng-repeat="x in list | filter:search| offset:currentPage*pageSize| limitTo:pageSize ">
En mi proyecto para lograr un buen resultado, tengo que hacer que este filtrado en el controlador no esté a la vista
Conozco la sintaxis básica $filter(''filter'')(''x'',''x'') pero no sé cómo hacer una cadena de filtros en el controlador, así que todo funcionará como en mi ejemplo de plantilla.
Encontré alguna solución, ahora solo con un filtro, pero debería funcionar con muchos;)
$scope.data = data; //my geojson from factory//
$scope.geojson = {}; //i have to make empty object to extend it scope later with data, it is solution i found for leaflet //
$scope.geojson.data = [];
$scope.FilteredGeojson = function() {
var result = $scope.data;
if ($scope.data) {
result = $filter(''limitTo'')(result,10);
$scope.geojson.data = result;
console.log(''success'');
}
return result;
};
y uso esta función en ng-repeat funciona bien, pero tengo que verificarlo con algunos filtros.
Este es un caso típico para bibliotecas de FP como lodash o Ramda. Asegúrese de que sus datos comunes se aplican como último argumento a cada filtro. (en este caso columnas)
$scope.columnDefs = _.compose(
$filter(''filter3''),
$filter(''filter2''),
$filter(''filter1'')
)($scope.columns)
o con argumentos adicionales
$scope.columnDefs = _.compose(
$filter(''filter3'').bind(null, optionalArg1, optionalArg2),
$filter(''filter2'').bind(null, optionalArg1),
$filter(''filter1'')
)($scope.columns)
Simplemente puede volver a filtrar lo que obtiene de su primer filtro. Y así sucesivamente.
var filtered;
filtered = $filter(''filter'')($scope.list, {name: $scope.filterParams.nameSearch});
filtered = $filter(''orderBy'')(filtered, $scope.filterParams.order);
A continuación, plunkr demuestra lo anterior.