Как использовать фильтр в контроллере?

Я написал функцию фильтра, которая будет возвращать данные на основе аргумента, который вы передаете. Я хочу такую же функциональность в моем контроллере. Можно ли использовать функцию фильтра в контроллере?

Это то, что я пытался до сих пор:

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

13 ответов

Inject $filter контроллер

function myCtrl($scope, $filter)
{
}

тогда везде, где вы хотите использовать этот фильтр, просто используйте его так:

$filter('filtername');

если вы хотите передать аргументы этому фильтру, сделайте это с помощью отдельных скобок:

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

здесь arg1 - это массив, который вы хотите фильтровать и arg2 - это объект, используемый для фильтрации.

1007

ответ предусмотренных @Прашант правильно, но есть еще более простой способ сделать то же самое. В основном вместо инъекции $filter зависимость и использование неудобного синтаксиса вызова ($filter('filtername')(arg1,arg2);) можно ввести зависимость: имя фильтра плюс Filter суффиксом.

взяв пример с вопроса, можно написать:

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

стоит отметить, что вы должны добавить Filter к имени фильтра, независимо от того, какое соглашение об именах вы используете: foo ссылается на вызов fooFilter
на fooFilter ссылается вызов fooFilterFilter

244

используя следующий пример кода, мы можем фильтровать массив в угловом контроллере по имени. это основано на следующем описании. http://docs.angularjs.org/guide/filter

этого.filteredArray = фильтрфильтр (это.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>
77

вот еще один пример использования filter в угловой контроллер:

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

простой, Эй ?

45

существует три возможных способа сделать это.

предположим, у вас есть следующий простой фильтр, который преобразует строку в верхний регистр, с параметром только первый символ.

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

напрямую через $filter

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

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

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

});

Примечание: это дает вам доступ к все фильтры.

присвоить $filter до variable

этот вариант позволяет использовать $filter как function.

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

    var uppercaseFilter = $filter('uppercase');

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

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

});

загрузить только определенный Filter

вы можете загрузить только определенный фильтр, добавив имя фильтра с Filter.

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

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

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

});

какой из них вы используете, относится к личным предпочтениям, но я рекомендую использовать третий, потому что это самый читаемый вариант.

33
function ngController($scope,$filter){
    $scope.name = "aaaa";
    $scope.age = "32";

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

имя второго аргумента метода контроллера должно быть "$filter", тогда только функциональность фильтра будет работать с этим примером. В этом примере я использовал фильтр" нижний регистр".

15

у меня есть еще один пример, который я сделал для своего процесса:

Я получаю массив со значением-описание, как это

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

в моих фильтрах.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';
    };
})

затем тест var (контроллер):

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

AngularJs позволяет использовать фильтры внутри шаблона или внутри контроллера, директивы и т. д..

в шаблоне вы можете использовать этот синтаксис

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

и внутри регулятора вы можете использовать впрыскивать $filter сервис

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

Если вам нужно больше с демонстрационным примером, вот ссылка

AngularJs примеры фильтров и демо

7

есть другой способ оценить фильтры, которые отражают синтаксис из представлений. Заклинание волосатое, но вы можете построить короткий путь к нему. Мне нравится, что синтаксис строки идентичен тому, что у вас было бы в представлении. Выглядит так:

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

Кажется, никто не упомянул, что вы можете использовать функцию аргумент2 на $filter ('filtername')(arg1, arg2);

например: 

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

простой пример даты с использованием $filter в контроллере будет:

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

как объяснено здесь -https://stackoverflow.com/a/20131782/262140

1

используйте ниже код, если мы хотим добавить несколько условий, а не одно значение в угловом фильтре javascript:

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

прежде всего, введите $filter в ваш контроллер, убедившись, что ngSanitize загружен в вашем приложении, позже в использовании контроллера выглядит следующим образом:

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

всегда проверяйте документы angularjs

1