2013-05-29 4 views
1

В AngularJS, как передать параметры пользовательской функции фильтра? В этом случае мне нужны как task, так и status, которые будут доступны в функции фильтра.Параметры для функции фильтра

Но только угловые инъекции task. Как я могу добавить status?

HTML

<div ng-repeat="status in statuses"> 
    Selected Status: {{ status.title } 
    <ul> 
     <li ng-repeat="task in tasks | filter:customFilter"> 
      Task Status: {{ task.status } 
     </li> 
    </ul> 
</div> 

JS

$scope.customFilter = function(task, status) 
{ 
    // use task and status to show only those tasks that have the selected status 
}; 

Я попытался <li ng-repeat="task in tasks | filter:customFilter(task, status)">, но это не сработало.

+1

Сторона примечания: Я думаю, что 'Status = {{status.title}' должен быть 'Status = {{status.title}}'. –

ответ

2

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

app.filter('customFilterName', ['$filter', function ($filter) { 
    var standardFilter = $filter('filter'); 
    return function (tasks, status) { 
     return standardFilter(tasks, function (task) { 
      // use task and status to show only those tasks that have the selected status 
     }); 
    }; 
}]); 

Первая строка - это определение для заводской функции фильтра. Вторая строка загружает стандартный фильтр фильтра (глупые имена, которые я знаю). Третья строка - это определение фактической функции фильтра, которую мы создали, и в 4-й строке мы завершаем существующий фильтр для обработки нашего ввода.

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

А на ваш взгляд:

<div ng-repeat="status in statuses"> 
    Status = {{ status.title } 
    <ul> 
     <li ng-repeat="task in tasks | customFilterName:status"> 
     </li> 
    </ul> 
</div> 
+0

Я пробовал это. Поместите console.log в функцию. Нвер получает вызов. – Ben

+0

У меня была опечатка, я добавил скрипку, чтобы показать, как она работает. http://jsfiddle.net/VxgAN/ –

+0

Это была моя опечатка, поэтому меняйте виджеты на задачи и эта ошибка уходит –

0

EDIT: Первоначально я сказал - Вы не должны обязательно обернуть функцию с $ фильтром - он должен работать как есть. Чтобы получить внешний масштаб, используйте $parent. - Это неверно. Родительский охват должен быть доступен во втором ng-повторе. Кроме того, чтобы передать несколько Params, угловой родной filter должен быть вызван, как и предыдущий ответ также заявил .:

app.filter('realFilter', function(){ 
    return function(itemArray, param){ 
    var filteredList=[]; 
    console.log(param); 
    for (var i in itemArray){ 
     if (itemArray[i].statum == param){ 
      filteredList.push(itemArray[i]); 
     } 
    } 
    return filteredList; 
    } 
}) 

HTML:

<li ng-repeat="task in tasks | realFilter:status.status"> 
    Task Status: {{ task.statum }} 
</li> 

Here's the plunk.

+0

Это не работает для меня. – Ben

+0

Позвольте мне протестировать, я, возможно, подошел ... – rGil

+0

Ну, ваши плункерные журналы «не определены». Я пропустил здесь пункт? – Ben

Смежные вопросы