angularjs - formularios - ¿Cómo usar un filtro en un controlador?
tablas dinamicas angular 4 (13)
He escrito una función de filtro que devolverá datos basados en el argumento que está pasando. Quiero la misma funcionalidad en mi controlador. ¿Es posible reutilizar la función de filtro en un controlador?
Esto es lo que he intentado hasta ahora:
function myCtrl($scope,filter1)
{
// i simply used the filter function name, it is not working.
}
Hay tres formas posibles de hacer esto.
Supongamos que tiene el siguiente filtro simple, que convierte una cadena en mayúsculas, con un parámetro solo para el primer carácter.
app.filter(''uppercase'', function() {
return function(string, firstCharOnly) {
return (!firstCharOnly)
? string.toUpperCase()
: string.charAt(0).toUpperCase() + string.slice(1);
}
});
Directamente a través de $filter
app.controller(''MyController'', function($filter) {
// HELLO
var text = $filter(''uppercase'')(''hello'');
// Hello
var text = $filter(''uppercase'')(''hello'', true);
});
Nota: esto le da acceso a todos sus filtros.
Asignar $filter a una variable
Esta opción le permite usar el $filter como una function .
app.controller(''MyController'', function($filter) {
var uppercaseFilter = $filter(''uppercase'');
// HELLO
var text = uppercaseFilter(''hello'');
// Hello
var text = uppercaseFilter(''hello'', true);
});
Cargar solo un Filter específico
Puede cargar solo un filtro específico agregando el nombre del filtro con Filter .
app.controller(''MyController'', function(uppercaseFilter) {
// HELLO
var text = uppercaseFilter(''hello'');
// Hello
var text = uppercaseFilter(''hello'', true);
});
La que use se adapte a sus preferencias personales, pero le recomiendo usar la tercera, porque es la opción más legible.
AngularJs le permite usar filtros dentro de la plantilla o dentro del Controlador, Directiva, etc.
En plantilla puedes usar esta sintaxis.
{{ variable | MyFilter: ... : ... }}
y dentro del controlador puede usar la inyección del servicio $ filter
angular.module(''MyModule'').controller(''MyCtrl'',function($scope, $filter){
$filter(''MyFilter'')(arg1, arg2);
})
Si necesitas más con el ejemplo Demo aquí hay un enlace.
Aquí hay otro ejemplo del uso del filter en un controlador Angular:
$scope.ListOfPeople = [
{ PersonID: 10, FirstName: "John", LastName: "Smith", Sex: "Male" },
{ PersonID: 11, FirstName: "James", LastName: "Last", Sex: "Male" },
{ PersonID: 12, FirstName: "Mary", LastName: "Heart", Sex: "Female" },
{ PersonID: 13, FirstName: "Sandra", LastName: "Goldsmith", Sex: "Female" },
{ PersonID: 14, FirstName: "Shaun", LastName: "Sheep", Sex: "Male" },
{ PersonID: 15, FirstName: "Nicola", LastName: "Smith", Sex: "Male" }
];
$scope.ListOfWomen = $scope.ListOfPeople.filter(function (person) {
return (person.Sex == "Female");
});
// This will display "There are 2 women in our list."
prompt("", "There are " + $scope.ListOfWomen.length + " women in our list.");
Simple, hey?
Ejemplo de fecha simple usando $ filter en un controlador sería:
var myDate = new Date();
$scope.dateAsString = $filter(''date'')(myDate, "yyyy-MM-dd");
Como se explica aquí, https://.com/a/20131782/262140
En primer lugar, inyecte $ filter a su controlador, asegurándose de que ngSanitize esté cargado dentro de su aplicación, luego, dentro del uso del controlador, se describe a continuación:
$filter(''linky'')(text, target, attributes)
Hay otra forma de evaluar los filtros que refleja la sintaxis de las vistas. La invocación es vellosa, pero podrías construirle un atajo. Me gusta que la sintaxis de la cadena sea idéntica a la que tendrías en una vista. Se ve como esto:
function myCtrl($scope, $interpolate) {
$scope.$eval($interpolate( "{{ myvar * 10 | currency }} dollars." ))
}
Inyecte $ filtro a su controlador
function myCtrl($scope, $filter)
{
}
Entonces, donde quiera que quieras usar ese filtro, solo úsalo así:
$filter(''filtername'');
Si desea pasar argumentos a ese filtro, hágalo usando paréntesis separados:
function myCtrl($scope, $filter)
{
$filter(''filtername'')(arg1,arg2);
}
Donde arg1 es la matriz que desea filtrar y arg2 es el objeto utilizado para filtrar.
La respuesta proporcionada por @Prashanth es correcta, pero hay una manera aún más fácil de hacer lo mismo. Básicamente, en lugar de inyectar la dependencia $filter y usar una sintaxis incómoda para invocarla ( $filter(''filtername'')(arg1,arg2); ) se puede inyectar la dependencia siendo: nombre del filtro más el sufijo del Filter .
Tomando ejemplo de la pregunta uno podría escribir:
function myCtrl($scope, filter1Filter) {
filter1Filter(input, arg1);
}
Debe tenerse en cuenta que debe agregar el Filter al nombre del filtro, independientemente de la convención de nombres que esté utilizando: se hace referencia a foo llamando a fooFilter
Se hace referencia a fooFilterFilter llamando a fooFilterFilter
Parece que nadie ha mencionado que puede usar una función como arg2 en $ filter (''filtername'') (arg1, arg2);
Por ejemplo:
$scope.filteredItems = $filter(''filter'')(items, function(item){return item.Price>50;});
Tengo otro ejemplo, que hice para mi proceso:
Obtengo un Array con valor-Descripción como este
states = [{
status: ''1'',
desc: ''/u2713''
}, {
status: ''2'',
desc: ''/u271B''
}]
en mis Filters.js:
.filter(''getState'', function () {
return function (input, states) {
//console.log(states);
for (var i = 0; i < states.length; i++) {
//console.log(states[i]);
if (states[i].status == input) {
return states[i].desc;
}
}
return ''/u2718'';
};
})
Entonces, una prueba var (controlador):
function myCtrl($scope, $filter) {
// ....
var resp = $filter(''getState'')(''1'', states);
// ....
}
Usando el siguiente código de ejemplo, podemos filtrar la matriz en el controlador angular por nombre. Esto se basa en la siguiente descripción. http://docs.angularjs.org/guide/filter
this.filteredArray = filterFilter (this.array, {name: ''Igor''});
JS:
angular.module(''FilterInControllerModule'', []).
controller(''FilterController'', [''filterFilter'', function(filterFilter) {
this.array = [
{name: ''Tobias''},
{name: ''Jeff''},
{name: ''Brian''},
{name: ''Igor''},
{name: ''James''},
{name: ''Brad''}
];
this.filteredArray = filterFilter(this.array, {name:''Igor''});
}]);
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example96-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.3/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="FilterInControllerModule">
<div ng-controller="FilterController as ctrl">
<div>
All entries:
<span ng-repeat="entry in ctrl.array">{{entry.name}} </span>
</div>
<div>
Filter By Name in angular controller
<span ng-repeat="entry in ctrl.filteredArray">{{entry.name}} </span>
</div>
</div>
</body>
</html>
Utilice el código a continuación si queremos agregar varias condiciones, en lugar de un solo valor en el filtro angular de javascript:
var modifiedArray = $filter(''filter'')(array,function(item){return (item.ColumnName == ''Value1'' || item.ColumnName == ''Value2'');},true)
function ngController($scope,$filter){
$scope.name = "aaaa";
$scope.age = "32";
$scope.result = function(){
return $filter(''lowercase'')($scope.name);
};
}
El nombre del segundo argumento del método del controlador debe ser "$ filtro", entonces solo la funcionalidad de filtro funcionará con este ejemplo. En este ejemplo he usado el filtro "en minúsculas".