搜索在 angular 数据中不起作用

Question

我想格式化日期然后从输入框搜索。我正在尝试使用转换器，但由于某种原因，搜索不起作用，我的过滤器也不起作用这是我的 fiddle 示例

这是我的代码

<div ng-app='app'>
  <h2>Todo</h2>
  <div ng-controller="TodoCtrl">
  <form>
      <div class="form-group">
        <div class="input-group">
          <div class="input-group-addon"><i class="fa fa-search"></i></div>
          <input type="text" class="form-control"  ng-model="search">
        </div>
      </div>
    </form>

   <div ng-repeat="item in data">
     {{item.date }}
   </div>
  </div>
</div>

这是我的控制器

var app = angular.module('app', []);
app.controller('TodoCtrl', function ($scope)  {

      $scope.data = [
  {
    name_object: "my Object",
    date: "2016-05-01 20:00:00",
    id: "123",
    name: "xy kaj Pl"
  },
  {
    name_object: "my Object2",
    date: "2014-15-01 20:10:00",
    id: "143",
    name: "Rose Jack"
  },
  {
    name_object: "my Object3",
    date: "2015-17-01 04:00:00",
    id: "143",
    name: "John Smith"
  },
  {
    name_object: "my Object4",
    date: "2016-18-01 04:00:00",
    id: "142",
    name: "Barbara Francis"
  }
]
});

$scope.dateFormat = function(string){
     return  isoDate(string);
    };
app.filter('isoDate', function(string){
   return new Date(string.split(' ').join('T'));
});

当我输入日期时，它没有进行过滤，而且我的自定义过滤器也无法生成日期。

谢谢

Answer 1

搜索问题

如 filter angular docs 中的示例所示，您可以按如下方式使用搜索过滤器：

<div ng-repeat="item in data | filter:search:strict">
  {{item.date }}
</div>

见jsfiddle

格式化问题

准备过滤器如下：

app.filter('isoDate', function() {
  return function(input) {
    return new Date(input.split(' ').join('T'));
  }}
);

用法：

<div ng-repeat="item in data | filter:search:strict">
  {{item.date | isoDate | date : 'yyyy-MM-dd hh:mm:ss'}}
</div>

以这种方式使用的过滤器仅影响显示日期的方式而不影响搜索，因此如果您使用不同于 yyyy-MM-dd hh:mm:ss 的日期格式，即 MM/dd/y 搜索将以数据格式工作，过滤器将影响在显示方式。会有误会。搜索将适用于 05-02（将显示 05/02/2012）。参见 jsfiddle。使用自定义搜索过滤器来保持显示方式和搜索日期格式之间的一致性。

自定义搜索过滤器

app.filter('searchFor', function($filter) {
    return function(arr, searchString) {
        if (!searchString) {
            return arr;
        }
        var result = [];
        searchString = searchString.toLowerCase();
        angular.forEach(arr, function(item) {
            var itemDateInFormat = $filter('date')(new Date(item.date.split(' ').join('T')), 'MM/dd/y');
            if (itemDateInFormat.indexOf(searchString) !== -1) {
                result.push(item);
            } else if (item.name.toLowerCase().indexOf(searchString) !== -1) {
                result.push(item);
            }
        });
        return result;
    };
});

HTML:

<tr ng-repeat="item in data | searchFor:search">
    <td> {{item.date | isoDate | date : 'MM/dd/y'}}</td>
    <td> {{item.name}}</td>
</tr>

见jsfiddle

记得：

在 searchFor 过滤器中使用的日期格式与用于显示 table 的日期格式保持一致。
添加 else if 以应用搜索其他数据，如添加 else if (item.name.toLowerCase().indexOf(searchString) !== -1) { result.push(item);} item.name.

搜索在 angular 数据中不起作用

search not working in angular data

angularjs

angularjs-directive

angularjs-service

angularjs-scope

angularjs-filter