649

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 probado hasta ahora:

function myCtrl($scope,filter1)
{ 
    // i simply used the filter function name, it is not working.
}

angularjs angular-filters ng-controller

— sumanth
fuente

2

mejor respuesta: stackoverflow.com/questions/20131553/…

— Raza Ahmed

1051

Inyecte $ filter a su controlador

function myCtrl($scope, $filter)
{
}

Luego, donde 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 arg1está la matriz que desea filtrar y arg2es el objeto utilizado para filtrar?

— JSAddict
fuente

21

Lo siento, señor, todavía no entiendo. ¿Podría hacer un Jsfiddle para mostrar cómo definir el cuerpo de la función de filtro y cómo se inserta en el archivo HTML?

— gm2008

34

@ gm2008 puede usar el filtro de número var anyNumber = $filter('number')(12.222222, 2);para obtener 12.22.

— vinesh

20

+ I por responder la pregunta ... que era "¿Cómo usar un filtro en un controlador?"

— Shanimal

8

Un ejemplo con el filtro de compilación "moneda": $filter("currency")(price, "$", 2)Entonces, si tuviera un precio = 200, esa expresión devolvería "$ 200.00".

— Netsi1964

2

La respuesta de @ pkozlowski.opensource es mejor que esto porque reduce las "cadenas mágicas". Un beneficio: ¿qué pasa si esto estaba en un controlador mucho más complejo y no pudo probar el filtro que se está utilizando? No notarías el error si usas $filter('filtter1')(2 t). Sin embargo, si inyecta filtter1FilterAngular se quejará inmediatamente de que la dependencia no existe.

— jkjustjoshing

253

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 la $filterdependencia y usar una sintaxis incómoda de invocarla ( $filter('filtername')(arg1,arg2);) se puede inyectar la dependencia siendo: nombre del filtro más el Filtersufijo.

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

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

Debe tenerse en cuenta que debe agregar Filteral nombre del filtro, sin importar la convención de nomenclatura que esté utilizando: se hace referencia a foo llamando a fooFilter
fooFilter llamando afooFilterFilter

— pkozlowski.opensource
fuente

38

Claro ... pero todavía debo encontrar un caso de uso en el que le gustaría inyectar 10 filtros a una clase ... Tal clase probablemente violaría el principio de responsabilidad única ...

— pkozlowski.opensource

10

Solo para dejar en claro, que esta no es una sintaxis JS "incómoda" ... var fooFilter = $ filter ('foo'); fooFilter (arg1, arg2);

— ciego

13

@OZ_ ¿qué quieres decir? Funciona minificación o no. La minificación no tiene nada que ver aquí, vea este plunk: plnkr.co/edit/1k6nJnHO8ukBWUfgAyQw?p=preview

— pkozlowski.opensource

2

Esto es ideal para usar un solo filtro, que es el caso con el que me encontré.

— Matthew Fotzler

2

+1 Creo que la sintaxis $ filter oculta dependencias, lo que conduce a un código menos mantenible. Inyectar filtros "estáticamente" es una mejor opción.

— BiAiB

79

Usando el siguiente código de muestra, 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, {nombre: '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>

— aamir sajjad
fuente

44

filterFilter (this.array, {nombre: 'Igor'}); ¿Es filterFilter una palabra clave o lo que filtra automáticamente los datos y por qué ['filterFilter', función (filterFilter) {definido aquí! ?

— suraj rawat

Un Plnkr con más ejemplos de esta técnica: plnkr.co/edit/icFurX?p=preview

— OzBob

Muy útil. Gracias.

— Kushal Jayswal

48

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

— Mike Gledhill
fuente

66

Esto es exactamente lo que necesitaba, gracias. Aunque aparentemente esta no es la cuestión. :)

— pvgoran

38

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 $filtera unvariable

Esta opción le permite usar $filtercomo a 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 agregando el nombre del filtro con Filter.

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

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

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

});

El que usa es de preferencia personal, pero recomiendo usar el tercero, porque es la opción más fácil de leer.

— Jeffrey Roosendaal
fuente

15

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 "$ filter", entonces solo la funcionalidad del filtro funcionará con este ejemplo. En este ejemplo, he usado el filtro "en minúsculas".

— Ipog
fuente

12

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

Luego, una prueba var (controlador):

function myCtrl($scope, $filter) {
    // ....
    var resp = $filter('getState')('1', states);
    // ....
}

— NtSpeed
fuente

¿Funcionará esto en angularjs 1.0.8? porque no funciona para mí ... dice que $ filter no está definido incluso después de agregarlo en el controlador

— shajin

7

AngularJs le permite usar filtros dentro de la plantilla o dentro del controlador, directiva, etc.

en la plantilla puedes usar esta sintaxis

{{ variable | MyFilter: ... : ... }}

y dentro del controlador puedes usar inyectando el servicio $ filter

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

— Hazarapet Tunanyan
fuente

incensar no es una palabra. ¿Te refieres a inyectar?

— kevinc

oops.yea quiero decir inyectar.

— Hazarapet Tunanyan

6

Hay otra forma de evaluar los filtros que reflejan la sintaxis de las vistas. La invocación es complicada, pero podría crear un acceso directo a ella. Me gusta que la sintaxis de la cadena sea idéntica a la que tendría en una vista. Se ve como esto:

function myCtrl($scope, $interpolate) { 
  $scope.$eval($interpolate( "{{ myvar * 10 | currency }} dollars." ))
}

— SimplGy
fuente

¡Eso en realidad es muy útil!

— DragonKnight

1

Esto es fantástico ya que me permite pasar una cadena que se ve como se vería en el marcado.

— kevinc

5

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

— Pavok
fuente

2

El ejemplo simple de fecha usando $ filter en un controlador sería:

var myDate = new Date();
$scope.dateAsString = $filter('date')(myDate, "yyyy-MM-dd");

Como se explica aquí: https://stackoverflow.com/a/20131782/262140

— AVH
fuente

1

Use el código a continuación si queremos agregar múltiples 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)

— Amay Kulkarni
fuente

1

En primer lugar, inyecte $ filter en su controlador, asegurándose de que ngSanitize esté cargado en su aplicación, más tarde dentro del uso del controlador es el siguiente:

$filter('linky')(text, target, attributes)

Siempre revisa los documentos de angularjs

— serdarsenay
fuente

1

si quieres filtrar objetos en el controlador prueba esto

var rateSelected = $filter('filter')($scope.GradeList, function (obj) {
                        if(obj.GradeId == $scope.contractor_emp.save_modal_data.GradeId)
                        return obj;
                });

Esto devolverá el objeto filtrado de acuerdo con la condición if

— Code Spy
fuente

0

Reutilizando un filtro Angular.js - Ver / Controlador

Esta solución cubre la reutilización de filtros angulares. Que es otra forma de filtrar datos, y Google me trajo aquí cuando lo necesitaba; y me gusta compartir

Caso de uso

Si ya está filtrando, digamos en una repetición ng en su vista (como se muestra a continuación), entonces es posible que haya definido un filtro en el controlador de la siguiente manera. Y luego puede reutilizar como en los ejemplos finales.

Ejemplo de uso de filtro: repetición filtrada en la vista

<div ng-app="someApp" ng-controller="someController">
    <h2>Duplicates</h2>
    <table class="table table-striped table-light table-bordered-light">
        <thead>
            <tr>
                <th>Name</th>
                <th>Gender</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="person in data | filter: searchDuplicate:true">
                <td>{{person.name}}</td>
                <td>{{person.gender}}</td>
            </tr>
        </tbody>
    </table>
</div>

Ejemplo de definición de filtro angular

angular.module('someApp',[])
.controller('someController', function($scope, $filter ) {

    $scope.people = [{name: 'Bob', gender: 'male'  , hasDuplicate: true },
                     {name: 'Bob', gender: 'male'  , hasDuplicate: true },
                     {name: 'Bob', gender: 'female', hasDuplicate: false}];

    $scope.searchDuplicate = { hasDuplicate : true };
})

Entonces, el concepto aquí es que ya está usando un filtro creado para su vista, y luego se da cuenta de que le gustaría usarlo también en su controlador.

Uso de la función de filtro dentro del controlador Ejemplo 1

var dup = $filter('filter')($scope.people, $scope.searchDuplicate, true)

Uso de la función de filtro dentro del controlador Ejemplo 2

Mostrar un botón solo si no se encuentran duplicados, utilizando el filtro anterior.

Botón HTML

<div ng-if="showButton()"><button class="btn btn-primary" ng-click="doSomething();"></button></div>

Botón Mostrar / Ocultar

$scope.doSomething = function(){ /* ... */ };
$scope.showButton = function(){ return $filter('filter')($scope.people, $scope.searchDuplicate, true).length == 0; };

Algunos pueden encontrar esta versión de filtrado fácil, y es una opción Angular.js.

El parámetro de comparación opcional "verdadero" utilizado en la vista y en la llamada a la función $ filter especifica que desea una comparación estricta. Si omite, los valores se pueden buscar en varias columnas.

https://docs.angularjs.org/api/ng/filter/filter

— Greg
fuente