Question

我有一个全局搜索，只有当我在控制器中显示数据时，它才有效。但是一旦我应用过滤器，搜索就找不到它。

所以，如果我有一个像1429138800这样的日期时间戳，我就会看到这个

{{ date }}

它会起作用

但是，当我添加过滤器以显示此{{date | date:'shortDate'}}的短信时，我尝试搜索1/17它无法正常工作....如何在应用过滤器后对其进行搜索？

Answer 1

好吧，我不知道你如何实现你的过滤器，但是为了制作过滤数据的例子，你可以这样做：

{{newDate = (date | date:'shortDate')}} -> "1/17"
{{newDate}} -> "1/17"

现在，您可以在newDate而不是date中搜索关键字希望能帮到你！

<强>更新
或者也许您可以编写自定义过滤器并在重复之前转换数据，而不会损害您的主要数据：

app.filter('toDate', ['$filter', function ($filter) {
    return function (a) {
      var b = angular.copy(a);
      for (var i=0, j=b.length; i<j; i++) {
        b[i] = $filter('date')(b[i], 'shortDate');
      }
      return b;
    }
}]);

然后像这样使用它：

<ul>
   <li ng-repeat="item in dates | toDate | filter:key">{{item}}</li>
</ul>

angular.module("app", [])
.controller("bodyCtrl", ["$scope", function($scope) {
  $scope.dates = [
    new Date("2016/1/1").getTime(),
    new Date("2016/1/2").getTime(),
    new Date("2016/1/3").getTime(),
    new Date("2016/1/4").getTime(),
    new Date("2016/1/5").getTime(),
    ]
}])
.filter('toDate', ['$filter', function ($filter) {
    return function (a) {
      var b = angular.copy(a);
      for (var i=0, j=b.length; i<j; i++) {
        b[i] = $filter('date')(b[i], 'shortDate');
      }
      return b;
    }
}]);

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="bodyCtrl">
    <input type="text" ng-model="key">
    <hr>
    Without toDate Filter
    <ul>
      <li ng-repeat="item in dates | filter:key">{{item | date:"shortDate"}}</li>
    </ul>
    <hr>
    With toDate Filter
    <ul>
      <li ng-repeat="item in dates | toDate | filter:key">{{item}}</li>
    </ul>
  </body>

</html>

角度全局搜索仅适用于没有过滤器

1 个答案: