过滤ng-repeat基于搜索输入与转换过滤器

Filter ng-repeat based on search input with transformation filter

本文关键字：输入 转换 过滤器 搜索 ng-repeat 于搜索 过滤      更新时间：2023-09-26

我有一个记录数组，我在一个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"，它就不再工作了。

你们能帮我使过滤器与值一起工作，因为它们显示在表列(即格式)?

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

    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)
        });
      }
    };
});

这是一个普朗克

这只是猜测工作，但是您的ng模型在搜索时存储更改。时间，但是你的过滤器正在"过滤"搜索。尝试使用搜索。

相关文章：