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

你可能需要玩指令。试试这个：

    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

Answer 2

这只是猜测工作，但你的ng模型是在search.time上存储更改，但你的过滤器是'过滤'搜索。尝试在过滤器中使用search.time。

使用转换过滤器根据搜索输入过滤ng-repeat

2 个答案: