javascript - 使用转换过滤器根据搜索输入过滤 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 过滤器进行转换。因此，记录时间显示的是“08:00 AM”，而不是“0800”。当用户输入“08”时，它可以工作，但如果他们输入“08:”或“AM”，它就不再工作。

你们能帮我让过滤器处理表格列中显示的值(即格式化)吗？

提前致谢。

Answer 1

您可能需要使用指令。试试这个:

    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