Фильтр ng-repeat на основе ввода поиска с фильтром трансформации

Question

У меня есть массив записей, и я повторяю в таблице HTML с фильтрами в заголовке. Оказывается, некоторые значения преобразуются фильтрами, что приводит к сбою фильтра ng-repeat.

<table class="table"> 
    <thead> 
    <tr> 
     <td><input ng-model="search.time" type="text" class="form-control" /></td> 
    </tr> 
    </thead> 
    <tbody> 
    <tr ng-repeat="record in records | filter: search"> 
     <td>{{record.time | timeFormatter}}</td> 
    </tr> 
    </tbody> 
</table> 

Как вы, ребята, видите, значение в столбце таблицы трансформируется фильтром timeFormatter. Таким образом, вместо «0800» он показывает «08:00 AM» для рекордного времени. Когда пользователь набирает «08», он работает, но если они набирают «08:» или «AM», это больше не работает.

Можете ли вы, ребята, помочь мне заставить фильтр работать со значениями, поскольку они отображаются в столбце таблицы (т. Е. С форматированием)?

Заранее спасибо.

Answer 1

Это только предположение, но ваша ng-модель хранит изменения в search.time, но ваш фильтр является «фильтрующим» поиском. Попробуйте использовать search.time в фильтре.

Answer 2

Вам, вероятно, понадобится играть с директивой. Попробуйте это:

angular.module("app").directive("myDirective", function(){ 
    return { 
     require: 'ngModel', 
     link: function(scope, element, attrs, ngModelController) { 
     ngModelController.$parsers.push(function(data) { 
      //convert data from view format to model format 
      return input.substring(0, 2) + ':' + input.substring(2) 
     }); 

     ngModelController.$formatters.push(function(data) { 
      //convert data from model format to view format 
     return input.substring(0, 2) + ':' + input.substring(2) 
     }); 
     } 
    }; 
}); 

Вот Plunker