Pregunta Cómo usar un filtro en un controlador?


He escrito una función de filtro que devolverá datos en función del 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.
}

614
2018-01-13 09:29


origen


Respuestas:


Inyectar $ filtro a su controlador

function myCtrl($scope, $filter)
{
}

Luego, donde sea que quiera usar ese filtro, simplemente úselo de esta manera:

$filter('filtername');

Si desea pasar argumentos a ese filtro, hágalo usando paréntesis separados:

function myCtrl($scope, $filter)
{
    $filter('filtername')(arg1,arg2);
}

Dónde arg1 es la matriz que desea filtrar y arg2 es el objeto usado para filtrar.


996
2018-01-13 09:42



La respuesta proporcionada por @Prashanth es correcta, pero hay una forma aún más fácil de hacer lo mismo. Básicamente, en lugar de inyectar $filter dependencia y usando la incómoda sintaxis de invocarlo ($filter('filtername')(arg1,arg2);) uno puede inyectar la dependencia siendo: nombre del filtro más el Filter sufijo.

Tomando un ejemplo de la pregunta que uno podría escribir:

function myCtrl($scope, filter1Filter) { 
  filter1Filter(input, arg1);
}

Debe tenerse en cuenta que debe agregar Filter al nombre del filtro, sin importar la convención de nomenclatura que esté usando: Se hace referencia a foo llamando fooFilter
Se hace referencia a fooFilter llamando fooFilterFilter


242
2018-01-13 12:19



Usando el siguiente código de muestra, podemos filtrar la matriz en 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>

76
2018-03-28 04:22



Aquí hay otro ejemplo de uso 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, ¿eh?


44
2017-09-09 12:22



Hay tres formas posibles de hacer esto.

Supongamos que tiene el siguiente filtro simple, que convierte una cadena en mayúscula, 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 todas tus filtros


Asignar $filter a un variable

Esta opción te permite usar el $filter como un function.

app.controller('MyController', function($filter) {

    var uppercaseFilter = $filter('uppercase');

    // HELLO
    var text = uppercaseFilter('hello');

    // Hello
    var text = uppercaseFilter('hello', true);

});

Cargue solo un específico Filter

Puede cargar solo un filtro específico al agregar el nombre del filtro con Filter.

app.controller('MyController', function(uppercaseFilter) {

    // HELLO
    var text = uppercaseFilter('hello');

    // Hello
    var text = uppercaseFilter('hello', true);

});

Cuál de las dos usa es de preferencia personal, pero recomiendo usar la tercera porque es la opción más fácil de leer.


32
2018-02-16 15:43



function ngController($scope,$filter){
    $scope.name = "aaaa";
    $scope.age = "32";

     $scope.result = function(){
        return $filter('lowercase')($scope.name);
    };
}

El nombre del segundo método del método del controlador debe ser "$ filter", entonces solo la funcionalidad del filtro funcionará con este ejemplo. En este ejemplo, he usado el filtro "minúsculas".


15
2017-11-16 03:18



Tengo otro ejemplo, que hice para mi proceso:

Obtengo una matriz con valor-descripción como esta

states = [{
    status: '1',
    desc: '\u2713'
}, {
    status: '2',
    desc: '\u271B'
}]

en mi 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);
    // ....
}

12
2018-05-28 18:18



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 inyectar $ filtro Servicio

angular.module('MyModule').controller('MyCtrl',function($scope, $filter){
    $filter('MyFilter')(arg1, arg2);
})

Si necesita más con el ejemplo de demostración aquí hay un enlace

Ejemplos de filtros AngularJs y demostración


7
2018-05-17 18:00