2016-12-05 3 views
1

Я фильтрация списка объектов в AngularJS с использованием нг-повтор:Используйте Восклицательный знак в качестве первого символа с AngularJS Фильтр

<tr ng-repeat="application in page.applications | filter: {DisplayName:page.ApplicationSearchValue}"> 
    {{application.DisplayName}} 
</tr> 

Если пользователь ставит восклицательный знак в качестве первого символа в поле поиска, то Угловая интерпретирует это как символ отрицания. Таким образом, !MyApplication возвращает все приложения, кроме MyAppliction.

Я попытался использовать пользовательскую функцию как описание в the Angular documentation for filter, но восклицательный знак никогда не находит свой путь в функцию.

Я обнаружил, что код будет через следующую функцию в AngularJS source code, которая в основном исполнение, что восклицательный знак получает специальную обработку:

function deepCompare(actual, expected, comparator, matchAgainstAnyProp, dontMatchWholeObject) { 
    var actualType = getTypeForFilter(actual); 
    var expectedType = getTypeForFilter(expected); 

    if ((expectedType === 'string') && (expected.charAt(0) === '!')) { 
    return !deepCompare(actual, expected.substring(1), comparator, matchAgainstAnyProp); 

     ..... 

Мой текущий «решение», чтобы изменить объект фильтра :

filter: {DisplayName:(page.ApplicationSearchValue.indexOf('!') == 0 ? page.ApplicationSearchValue.substring(1) : page.ApplicationSearchValue)} 

Но это только вопрос времени, пока QA не выясняет, что эта проблема будет по-прежнему иметь место, если кто-то начал окно поиска с !!.

Есть ли общий шаблон для решения этой ситуации?

+0

Покажите нам, как вы пытались использовать пользовательскую функцию. –

+0

'ctrl.filterFunc = function (фактический, ожидаемый) { expected = expected.indexOf ('!') == 0? Ожидаемая.подгруппа (1): ожидаемая; возвращение фактический.toLowerCase(). ИндексOf (ожидается)! = -1; } ' Но значение ожидаемого никогда не включало восклицательный знак. – HaveSpacesuit

+0

Не пропустите компаратор. Передайте функцию как единственный аргумент фильтра. Сделать эту функцию возвратой true, если элемент должен быть принят фильтром, а false в противном случае. –

ответ

1

В итоге я использовал директиву, измененную мной из этой публикации. https://stackoverflow.com/a/15346236/2908576

MyApp.directive("noNegation", [function() { 
    return { 
     require: "ngModel", 
     link: function(scope, element, attrs, ngModelController) { 
      ngModelController.$parsers.push(function(data) { 
       while (data.indexOf("!") == 0) 
        data = data.substring(1); 
       return data; 
      }); 
     } 
    }; 
}]); 

Он игнорирует все восклицательные знаки в начале ввода. Это означает, что поиск !!!MyApplication по-прежнему возвращает MyApplication, хотя восклицательные знаки не указаны.