angularjs - use - pipe filter angular js




Como usar um filtro em um controlador? (10)

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 de $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 $filter a uma variable

Esta opção permite que você use o $filter como uma function .

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

    var uppercaseFilter = $filter('uppercase');

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

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

});

Carregar apenas um Filter específico

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

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

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

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

});

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

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?

Isso é o que eu tentei até agora:

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

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

Tomando exemplo da pergunta que se poderia escrever:

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

Deve-se notar que você deve anexar Filter ao nome do filtro, não importa qual convenção de nomenclatura esteja usando: foo é referenciado chamando fooFilter
fooFilter é referenciado chamando fooFilterFilter


Aqui está outro exemplo de uso de filter em 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?


Eu tenho outro exemplo, que fiz para o meu processo:

Eu recebo um array com valor-descrição como este

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

no 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 (controlador):

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

Injetar $ filter no seu controlador

function myCtrl($scope, $filter)
{
}

Então, onde quer que você queira usar esse filtro, basta usá-lo assim:

$filter('filtername');

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

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

Onde arg1 é a matriz que você deseja filtrar e arg2 é o objeto usado para filtrar.


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

Se você quiser filtrar o objeto no controlador tente isto

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 se


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

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

Como explicado aqui - https://.com/a/20131782/262140


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

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

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" e somente a funcionalidade do filtro funcionará com este exemplo. Neste exemplo, usei o filtro "minúsculas".





ng-controller