Come usare un filtro in un controller?

649

Ho scritto una funzione di filtro che restituirà i dati in base all'argomento che stai passando. Voglio la stessa funzionalità nel mio controller. È possibile riutilizzare la funzione filtro in un controller?

Questo è quello che ho provato finora:

function myCtrl($scope,filter1)
{ 
    // i simply used the filter function name, it is not working.
}
angularjs  angular-filters  ng-controller 
— Sumanth
fonte
2
— Raza Ahmed,

Risposte:

1051

Iniettare $ filter sul controller

function myCtrl($scope, $filter)
{
}

Quindi, ovunque tu voglia utilizzare quel filtro, basta usarlo in questo modo:

$filter('filtername');

Se vuoi passare argomenti a quel filtro, fallo usando parentesi separate:

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

Dov'è arg1l'array su cui si desidera filtrare ed arg2è l'oggetto utilizzato per filtrare.

— JSAddict
fonte
21
Mi spiace, signore, ancora non capisco. Potresti creare un Jsfiddle per mostrare come definire il corpo della funzione filtro e come viene inserito nel file HTML?
— gm2008
34
@ gm2008 puoi usare il filtro numerico come var anyNumber = $filter('number')(12.222222, 2);per ottenere 12.22.
— vigna
20
+ I per aver risposto alla domanda ... che era "Come utilizzare un filtro in un controller?"
— Shanimal,
8
Un esempio con filtro "currency" incorporato: $filter("currency")(price, "$", 2)Quindi se avessi un prezzo = 200, quell'espressione restituirebbe "$ 200,00".
— Netsi1964,
2
La risposta di @ pkozlowski.opensource è migliore di questa perché riduce le "stringhe magiche". Un vantaggio: e se questo fosse in un controller molto più complesso e non riuscissi a testare l'unità del filtro in uso? Non noteresti l'errore se usi $filter('filtter1')(2 t). Tuttavia, se si inietta filtter1FilterAngular si lamenterà immediatamente che la dipendenza non esiste.
— jkjustjoshing,
253

La risposta fornita da @Prashanth è corretta, ma esiste un modo ancora più semplice di fare lo stesso. Fondamentalmente invece di iniettare la $filterdipendenza e usare la sintassi scomoda di invocarla ( $filter('filtername')(arg1,arg2);) si può iniettare la dipendenza essendo: nome del filtro più il Filtersuffisso.

Prendendo esempio dalla domanda si potrebbe scrivere:

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

Va notato che è necessario aggiungere Filteral nome del filtro, indipendentemente dalla convenzione di denominazione che si sta utilizzando: foo è referenziato chiamando fooFilter
fooFilter è referenziato chiamandofooFilterFilter

— pkozlowski.opensource
fonte
38
Certo .. ma devo ancora trovare un caso d'uso in cui vorresti iniettare 10 filtri in una classe ... Tale classe probabilmente violerebbe il principio della singola responsabilità ...
— pkozlowski.opensource
10
Giusto per chiarire che questa non è una sintassi JS "imbarazzante" ... var fooFilter = $ filter ('foo'); fooFilter (arg1, arg2);
— blindgaenger,
13
@OZ_ cosa intendi? Funziona minimizzazione o no. La minimizzazione non ha nulla a che fare qui, vedi questo plunk: plnkr.co/edit/1k6nJnHO8ukBWUfgAyQw?p=preview
— pkozlowski.opensource
2
Questo è l'ideale per l'utilizzo di un singolo filtro, che è il caso in cui mi sono imbattuto.
— Matthew Fotzler,
2
+1 Penso che la sintassi $ filter nasconda le dipendenze, portando quindi a un codice meno gestibile. L'iniezione di filtri "staticamente" è una scelta migliore.
— BiAiB,
79

Utilizzando il seguente codice di esempio, possiamo filtrare l'array nel controller angolare per nome. questo si basa sulla seguente descrizione. 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>
— aamir sajjad
fonte
4
filterFilter (this.array, {name: 'Igor'}); filterFilter è una parola chiave o cosa ha automaticamente filtrato i dati e perché ['filterFilter', function (filterFilter) {definito qui! ?
— suraj rawat,
Un Plnkr con altri esempi di questa tecnica: plnkr.co/edit/icFurX?p=preview
— OzBob
Molto utile. Grazie.
— Kushal Jayswal,
48

Ecco un altro esempio di utilizzo filterin un controller angolare:

$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.");

Semplice, ehi?

— Mike Gledhill
fonte
6
Questo è esattamente ciò di cui avevo bisogno, grazie. Anche se apparentemente non è questo il problema. :)
— pvgoran,
38

Esistono tre modi possibili per farlo.

Supponiamo che tu abbia il seguente filtro semplice, che converte una stringa in maiuscolo, con un parametro solo per il primo carattere.

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

Direttamente attraverso $filter

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

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

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

});

Nota: questo ti dà accesso a tutti i tuoi filtri.

Assegnare $filteravariable

Questa opzione ti permette di usare il $filtersimile a function.

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

    var uppercaseFilter = $filter('uppercase');

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

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

});

Carica solo uno specifico Filter

È possibile caricare solo un filtro specifico aggiungendo il nome del filtro con Filter.

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

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

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

});

Quello che usi viene in base alle preferenze personali, ma ti consiglio di usare il terzo, perché è l'opzione più leggibile.

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

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

Il nome del secondo argomento del metodo controller dovrebbe essere "$ filter", quindi solo la funzionalità di filtro funzionerà con questo esempio. In questo esempio ho usato il filtro "lettere minuscole".

— Ipog
fonte
12

Ho un altro esempio, che ho fatto per il mio processo:

Ottengo un array con valore Descrizione come questo

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

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

Quindi, un test var (controller):

function myCtrl($scope, $filter) {
    // ....
    var resp = $filter('getState')('1', states);
    // ....
}
— NtSpeed
fonte
Funzionerà in angularjs 1.0.8 ?? perché non funziona per me..dice $ filter non è definito anche dopo che l'ho aggiunto nel controller
— shajin
7

AngularJs ti consente di utilizzare i filtri all'interno del modello o all'interno del controller, direttiva ecc.

nel modello è possibile utilizzare questa sintassi

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

e all'interno del controller puoi usare l'iniezione del servizio $ filter

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

Se hai bisogno di più con l'esempio Demo ecco un link

Esempi di filtri e demo di AngularJs

— Hazarapet Tunanyan
fonte
inceting non è una parola. Intendi iniettare?
— Kevin
oops.yea intendo iniettare.
— Hazarapet Tunanyan,
6

Esiste un altro modo per valutare i filtri che rispecchiano la sintassi dalle viste. L'invocazione è pelosa ma potresti crearne una scorciatoia. Mi piace che la sintassi della stringa sia identica a quella che avresti in una vista. Somiglia a questo:

function myCtrl($scope, $interpolate) { 
  $scope.$eval($interpolate( "{{ myvar * 10 | currency }} dollars." ))
}
— SimplGy
fonte
Questo in realtà è molto utile!
— DragonKnight
1
questo è fantastico in quanto mi permette di passare una stringa che sembra proprio come sarebbe nel markup.
— Kevin
5

Sembra che nessuno abbia menzionato che puoi usare una funzione come arg2 in $ filter ('filtername') (arg1, arg2);

Per esempio: 

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

Utilizzare il codice seguente se si desidera aggiungere più condizioni, anziché un singolo valore nel filtro angolare javascript:

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

se vuoi filtrare l'oggetto nel controller prova questo

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

Ciò restituirà l'oggetto filtrato in base alla condizione if

— Codice spia
fonte
0

Riutilizzo di un filtro Angular.js - Visualizza / Controller

Questa soluzione riguarda il riutilizzo dei filtri angolari. Il che è un altro modo per filtrare i dati e Google mi ha portato qui quando ne avevo bisogno; e mi piace condividere.

Caso d'uso

Se stai già filtrando, ad esempio in una ripetizione ng nella tua vista (come sotto), allora potresti aver definito un filtro nel controller come segue di seguito. E poi puoi riutilizzare come negli esempi finali.

Esempio di utilizzo del filtro - Ripeti filtrato nella 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>

Esempio di definizione del filtro angolare

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

Quindi, il concetto qui è che stai già usando un filtro creato per la tua vista, e poi ti rendi conto che vorresti usarlo anche nel tuo controller.

Funzione filtro Uso all'interno del controller Esempio 1

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

Funzione filtro Uso all'interno del controller Esempio 2

Mostra un pulsante solo se non vengono trovati duplicati, utilizzando il filtro precedente.

Pulsante HTML

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

Mostra / nascondi pulsante

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

Alcuni potrebbero trovare semplice questa versione del filtro ed è un'opzione Angular.js.

Il parametro di confronto opzionale "true" utilizzato nella vista e nella chiamata della funzione $ filter specifica che si desidera un confronto rigoroso. Se si omette, è possibile cercare valori su più colonne.

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

— Greg
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.