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

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

2

Um exemplo simples de data usando $ filter em um controlador seria:

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

Conforme explicado aqui - https://stackoverflow.com/a/20131782/262140

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