angularjs filtros - ¿Cómo usar un filtro en un controlador?




busqueda formularios (12)

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.
}

Answers

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." ))
}

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)

Siempre echa un vistazo a los documentos angularjs


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.

AngularJs filtra ejemplos y demo


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.


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?


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.


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


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


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;});

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".


Sí, hay una mejor manera: puede usar el servicio $ parse en su directiva para evaluar una expresión en el contexto del alcance principal, mientras vincula ciertos identificadores en la expresión a valores visibles solo dentro de su directiva:

$parse(attributes.callback)(scope.$parent, { arg2: yourSecondArgument });

Agregue esta línea a la función de enlace de la directiva donde puede acceder a los atributos de la directiva.

El atributo de devolución de llamada se puede establecer como callback = "callback(item.id, arg2)" porque arg2 está vinculado a yourSecondArgument por el servicio $ parse dentro de la directiva. Directivas como ng-click permiten acceder al evento click mediante el identificador $event dentro de la expresión pasada a la directiva utilizando exactamente este mecanismo.

Tenga en cuenta que no tiene que hacer que la callback un miembro de su alcance aislado con esta solución.





angularjs angular-filters ng-controller