Como usar um filtro em um controlador?

649

Eu escrevi uma função de filtro que retornará dados com base no argumento que você está passando. Eu quero a mesma funcionalidade no meu controlador. É possível reutilizar a função de filtro em um controlador?

Isto é o que eu tentei até agora:

function myCtrl($scope,filter1)
{ 
    // i simply used the filter function name, it is not working.
}
angularjs angular-filters ng-controller sumanth
fonte
2
melhor resposta: stackoverflow.com/questions/20131553/…
Raza Ahmed 3/16

Respostas:

1051

Injete $ filter no seu controlador

function myCtrl($scope, $filter)
{
}

Onde quer que você queira usar esse filtro, use-o assim:

$filter('filtername');

Se você deseja passar argumentos para esse filtro, faça-o usando parênteses separados:

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

Onde arg1está a matriz na qual você deseja filtrar e arg2é o objeto usado para filtrar.

JSAddict
fonte
21
Desculpe, senhor, eu ainda não entendo. Você poderia criar um Jsfiddle para mostrar como definir o corpo da função de filtro e como ele é inserido no arquivo HTML?
gm2008
34
@ gm2008 você pode usar o filtro de números como var anyNumber = $filter('number')(12.222222, 2);deseja 12.22.
Vinesh
20
+ Eu, por responder à pergunta ... que era "Como usar um filtro em um controlador?"
Shanimal 21/02
8
Um exemplo com a "moeda" criada no filtro: $filter("currency")(price, "$", 2)se você tivesse um preço = 200, essa expressão retornaria "$ 200,00".
Netsi1964 /
2
A resposta de @ pkozlowski.opensource é melhor que isso porque reduz as "cordas mágicas". Um benefício - e se este estivesse em um controlador muito mais complexo e você não testasse o filtro em uso? Você não notaria o erro se usasse $filter('filtter1')(2 t). No entanto, se você injetar o filtter1FilterAngular reclamará imediatamente que a dependência não existe.
Jkjustjoshing #
253

A resposta fornecida por @Prashanth está correta, mas existe uma maneira ainda mais fácil de fazer o mesmo. Basicamente, em vez de injetar a $filterdependência e usar uma sintaxe incômoda de invocá-la ( $filter('filtername')(arg1,arg2);), pode-se injetar a dependência sendo: nome do filtro mais o Filtersufixo.

Tomando o exemplo da pergunta que se poderia escrever:

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

Deve-se observar que você deve anexar Filterao nome do filtro, independentemente da convenção de nomenclatura que estiver usando: foo é referenciado por chamada fooFilter
fooFilter é referenciado por chamadafooFilterFilter

pkozlowski.opensource
fonte
38
Claro .. mas eu ainda estou para encontrar um caso de uso onde você gostaria de injetar 10 filtros para uma classe ... Tal classe provavelmente violaria o princípio da responsabilidade única ...
pkozlowski.opensource
10
Só para deixar claro, que essa não é uma sintaxe JS "estranha" ... var fooFilter = $ filter ('foo'); fooFilter (arg1, arg2);
blindgaenger
13
@OZ_, o que você quer dizer? Funciona minificação ou não. A minificação não tem nada a ver aqui, veja esta plunk: plnkr.co/edit/1k6nJnHO8ukBWUfgAyQw?p=preview
pkozlowski.opensource
2
Isso é ideal para usar um único filtro, que foi o caso em que encontrei.
Matthew Fotzler
2
+1 Acho que a sintaxe $ filter oculta dependências, levando a um código menos sustentável. Injetar filtros "estaticamente" é uma escolha melhor.
BiAiB
79

Usando o código de exemplo a seguir, podemos filtrar a matriz no controlador angular por nome. isso é baseado na descrição a seguir. http://docs.angularjs.org/guide/filter

this.filteredArray = filterFilter (this.array, {nome: '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
fonte
4
filterFilter (this.array, {name: 'Igor'}); é filterFilter uma palavra-chave ou o que filtrou automaticamente os dados e por que ['filterFilter', função (filterFilter) {definida aqui! ?
precisa saber é o seguinte
Um Plnkr com mais exemplos dessa técnica: plnkr.co/edit/icFurX?p=preview
OzBob
Muito útil. Obrigado.
Kushal Jayswal 10/07
48

Aqui está outro exemplo de uso filterem um 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.");

Simples, ei?

Mike Gledhill
fonte
6
Isso é exatamente o que eu precisava, obrigado. Embora, aparentemente, não seja disso que se trata. :)
pvgoran
38

Existem três maneiras possíveis de fazer isso.

Vamos supor que você tenha o seguinte filtro simples, que converte uma string em maiúscula, com um parâmetro apenas para o primeiro caractere.

app.filter('uppercase', function() {
    return function(string, firstCharOnly) {
        return (!firstCharOnly)
            ? string.toUpperCase()
            : string.charAt(0).toUpperCase() + string.slice(1);
    }
});

Diretamente através $filter

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

    // HELLO
    var text = $filter('uppercase')('hello');

    // Hello
    var text = $filter('uppercase')('hello', true);

});

Nota: isso lhe dá acesso a todos os seus filtros.

Atribuir $filtera umvariable

Esta opção permite que você use o $filtertipo a function.

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

    var uppercaseFilter = $filter('uppercase');

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

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

});

Carregue apenas um específico Filter

Você pode carregar apenas um filtro específico anexando o nome do filtro Filter.

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

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

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

});

Qual deles usa tem preferência pessoal, mas eu recomendo o terceiro, porque é a opção mais legível.

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

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

O nome do segundo argumento do método do controlador deve ser "$ filter"; somente a funcionalidade do filtro funcionará com este exemplo. Neste exemplo, usei o filtro "minúsculo".

Ipog
fonte
12

Eu tenho outro exemplo que fiz para o meu processo:

Eu recebo uma matriz com o valor-Description como este

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

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

Então, um teste var (controller):

function myCtrl($scope, $filter) {
    // ....
    var resp = $filter('getState')('1', states);
    // ....
}
NtSpeed
fonte
Isso funcionará no angularjs 1.0.8 ?? coz não o seu trabalho para me..says $ filtro não está definido, mesmo depois acrescentei que no controlador
Shajin
7

AngularJs permite usar filtros dentro do modelo ou dentro do controlador, diretiva etc.

no modelo, você pode usar esta sintaxe

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

e no controlador interno, você pode usar a injeção do serviço $ filter

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

Se você precisar de mais com o exemplo de demonstração, aqui está um link

Exemplos e demo de filtro do AngularJs

Hazarapet Tunanyan
fonte
incitar não é uma palavra. Você quer dizer injetar?
Kevinc
sim, quero dizer injetar.
Hazarapet Tunanyan
6

Há outra maneira de avaliar filtros que espelham a sintaxe das visualizações. A invocação é complicada, mas você pode criar um atalho para ela. Gosto que a sintaxe da string seja idêntica à que você teria em uma exibição. Se parece com isso:

function myCtrl($scope, $interpolate) { 
  $scope.$eval($interpolate( "{{ myvar * 10 | currency }} dollars." ))
}
SimplGy
fonte
Isso é realmente muito útil!
precisa saber é o seguinte
1
isso é fantástico, pois permite que eu passe uma string que se parece exatamente com a marcação.
Kevinc
5

Parece que ninguém mencionou que você pode usar uma função como arg2 em $ filter ('filtername') (arg1, arg2);

Por exemplo: 

$scope.filteredItems = $filter('filter')(items, function(item){return item.Price>50;});
pavok
fonte
1

Use o código abaixo se quisermos adicionar várias condições, em vez de um valor único no filtro angular javascript:

var modifiedArray = $filter('filter')(array,function(item){return (item.ColumnName == 'Value1' || item.ColumnName == 'Value2');},true)
Amay Kulkarni
fonte
1

Antes de tudo, injete o filtro $ no seu controlador, certificando-se de que ngSanitize esteja carregado no seu aplicativo e, posteriormente, no uso do controlador, da seguinte maneira:

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

Sempre verifique os documentos do angularjs

serdarsenay
fonte
1

se você deseja filtrar o objeto no controlador, tente isso

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

Isso retornará o objeto filtrado de acordo com a condição if

Code Spy
fonte
0

Reutilizando um filtro Angular.js - Exibir / Controlar

Esta solução está cobrindo a reutilização de filtros angulares. Essa é outra maneira de filtrar dados, e o Google me trouxe aqui quando eu precisei; e eu gosto de compartilhar

Caso de Uso

Se você já está filtrando, digamos em ng-repeat na sua visualização (como abaixo), então você pode ter definido um filtro no controlador da seguinte maneira. E então você pode reutilizar como nos exemplos finais.

Exemplo de uso de filtro - repetição filtrada na exibição

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

Exemplo de definição 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 };
})

Portanto, o conceito aqui é que você já está usando um filtro criado para sua visualização e, em seguida, percebe que também gostaria de usá-lo em seu controlador.

Utilização da função de filtro no exemplo 1 do controlador

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

Utilização da função de filtro no controlador Exemplo 2

Mostrar um botão apenas se nenhuma duplicata for encontrada, usando o filtro anterior.

Botão Html

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

Botão Mostrar / Ocultar

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

Alguns podem achar essa versão da filtragem fácil, e é uma opção do Angular.js.

O parâmetro comparador opcional "true" usado na visualização e na chamada da função $ filter especifica que você deseja uma comparação estrita. Se você omitir, os valores podem ser pesquisados ​​em várias colunas.

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

Greg
fonte