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

Ответ 1

ОБНОВЛЕНИЕ: Я думаю, что на самом деле я недостаточно смотрел документацию, но вы можете определенно использовать filter с этим синтаксисом (см. эта скрипка) для фильтрации по свойству объектов:

<tr ng-repeat="user in users | filter:{status:4}">

Вот мой оригинальный ответ, если он кому-то помогает:

Используя фильтр filter, вы не сможете передать параметр, но вы можете сделать как минимум две вещи.

1) Задайте данные, которые вы хотите фильтровать, в переменной области видимости и укажите, что в вашей функции фильтра, например эта скрипка.

JavaScript:

$scope.status = 1;
$scope.users = [{name: 'first user', status: 1},
                {name: 'second user', status: 2},
                {name: 'third user', status: 3}];

$scope.isStatus = function(user){
    return (user.status == $scope.status);
};

Html:

<li ng-repeat="user in users | filter:isStatus">

ИЛИ

2) Создайте новый фильтр, который принимает параметр эту скрипту.

JavaScript:

var myApp = angular.module('myApp', []);
myApp.filter('isStatus', function() {
  return function(input, status) {
    var out = [];
      for (var i = 0; i < input.length; i++){
          if(input[i].status == status)
              out.push(input[i]);
      }      
    return out;
  };
});

Html:

<li ng-repeat="user in users | isStatus:3">

Обратите внимание, что этот фильтр предполагает, что в объектах массива есть свойство status, которое может сделать его менее многоразовым, но это всего лишь пример. Вы можете прочитать этот для получения дополнительной информации о создании фильтров.

Ответ 2

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

На самом деле есть другое (может быть, лучшее решение), где вы можете использовать фильтр 'w500 > native' filter 'и все еще передавать аргументы вашему настраиваемому фильтру.

Рассмотрим следующий код:

    <li ng-repeat="user in users | filter:byStatusId(3)">
        <span>{{user.name}}</span>
    <li>

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

$scope.byStatusId = function(statusId) {
    return function(user) {
        return user.status.id == statusId;
    }
}

Этот подход более универсален, потому что вы можете делать сравнения по значениям, вложенным глубоко внутри объекта.

Оформить Обратная полярность фильтра angular.js, чтобы узнать, как вы можете использовать это для других полезных операций с фильтром.

Ответ 3

Это может быть немного неуместно, но если вы пытаетесь применить несколько фильтров с настраиваемыми функциями, вы должны изучить: https://github.com/tak215/angular-filter-manager

Ответ 4

Пример. У меня есть список студентов, как показано ниже:

$scope.students = [  
   { name: 'Hai', age: 25, gender: 'boy' },  
   { name: 'Hai', age: 30, gender: 'girl' },  
   { name: 'Ho', age: 25, gender: 'boy' },  
   { name: 'Hoan', age: 40, gender: 'girl' },  
   { name: 'Hieu', age: 25, gender: 'boy' }  
 ];  

Я хочу отфильтровать студентов по полу, чтобы быть мальчиком, и фильтровать их по имени.

Сначала я создаю функцию с именем "filterbyboy" следующим образом:

$scope.filterbyboy = function (genderstr) {  
   if ((typeof $scope.search === 'undefined')||($scope.search === ''))  
     return (genderstr = "")  
   else  
    return (genderstr = "boy");  
 };  

Объяснение: если не имя фильтра, тогда отобразите все ученики, которые фильтруют по имени и полу, как "мальчик"

Вот полный код HTML и демонстрация Как использовать и оператор в примере AngularJs

Ответ 5

Если вы создали настраиваемый фильтр AngularJs, вы можете отправить несколько параметров в свой фильтр. Вот использование в шаблоне

{{ variable | myFilter:arg1:arg2...  }}

и если вы используете фильтр внутри своего контроллера, вот как вы можете это сделать

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

если вам нужно больше с примерами и онлайн-демонстрацией, вы можете использовать этот

AngularJs фильтрует примеры и демонстрацию