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

551

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

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

function myCtrl($scope,filter1)
{ 
    // i simply used the filter function name, it is not working.
}
Теги:
angular-filters
ng-controller

12 ответов

902
Лучший ответ

Вставить $фильтр на ваш контроллер

function myCtrl($scope, $filter)
{
}

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

$filter('filtername');

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

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

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

Поделиться
  • 19
    Извините, сэр, я до сих пор не понимаю. Не могли бы вы сделать Jsfiddle, чтобы показать, как определить тело функции фильтра и как она вставляется в HTML-файл?
  • 34
    @ gm2008 вы можете использовать числовой фильтр, например var anyNumber = $filter('number')(12.222222, 2); чтобы получить 12.22 .
Показать ещё 10 комментариев
247

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

Взяв пример из вопроса, который можно было бы написать:

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

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

Поделиться
  • 1
    Для одного фильтра это хорошо. Если вы хотите использовать 10 фильтров, вам нужно ввести 10 фильтров в ваш контроллер.
  • 38
    Конечно ... но я все еще должен найти вариант использования, где вы хотели бы добавить 10 фильтров в один класс ... Такой класс, вероятно, нарушил бы принцип единой ответственности ...
Показать ещё 8 комментариев
77

Используя следующий пример кода, мы можем фильтровать массив в контроллере angular по имени. это основано на следующем описании. 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>
Поделиться
  • 4
    filterFilter (this.array, {name: 'Igor'}); является ли filterFilter ключевым словом или каким оно автоматически отфильтровывает данные и почему ['filterFilter', function (filterFilter) {определено здесь! ?
  • 0
    Plnkr с большим количеством примеров этой техники: plnkr.co/edit/icFurX?p=preview
Показать ещё 1 комментарий
38

Вот еще один пример использования filter в контроллере 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.");

Простой, эй?

Поделиться
  • 5
    Это именно то, что мне было нужно, спасибо. Хотя, видимо, вопрос не в этом. :)
  • 0
    Это сработало для меня
25

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

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

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

Этот параметр позволяет использовать $filter как a 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);

});

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

Поделиться
14 
function ngController($scope,$filter){
    $scope.name = "aaaa";
    $scope.age = "32";

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

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

Поделиться
12

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

Я получаю массив со значением-Описание вроде этого

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

в файле 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';
    };
})

Затем тестовый var (controller):

function myCtrl($scope, $filter) {
    // ....
    var resp = $filter('getState')('1', states);
    // ....
}
Поделиться
  • 0
    Будет ли это работать в angularjs 1.0.8? потому что это не работает для меня .. говорит $ фильтр не определен даже после того, как я добавил, что в контроллере
7

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

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

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

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

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

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

Примеры и демонстрация фильтров AngularJs

Поделиться
  • 0
    Inceting это не слово. Вы имеете в виду инъекцию?
  • 0
    oops.yea Я имею в виду инъекцию.
5

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

function myCtrl($scope, $interpolate) { 
  $scope.$eval($interpolate( "{{ myvar * 10 | currency }} dollars." ))
}
Поделиться
  • 0
    Это на самом деле очень полезно!
  • 1
    это фантастика, так как позволяет передать строку, которая выглядит так же, как в разметке.
3

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

Например:

$scope.filteredItems = $filter('filter')(items, function(item){return item.Price>50;});
Поделиться
1

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

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

Как объясняется здесь - https://stackoverflow.com/questions/20131553/angularjs-convert-dates-in-controller

Поделиться
  • 0
    и если вы используете ng-locale, вы можете использовать именованные форматы
0

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

var modifiedArray = $filter('filter')(array,function(item){return (item.ColumnName == 'Value1' || item.ColumnName == 'Value2');},true)
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню