【问题标题】:Angular js search filter (date and ng-repeat inside ng-repeat)Angular js 搜索过滤器(ng-repeat 中的日期和 ng-repeat)
【发布时间】:2016-11-11 22:14:10
【问题描述】:

我有一个显示用户信息的表格。我们在顶部有一个搜索框,允许用户输入文本并从下拉列表中选择要搜索的类型。

<input type="text" ng-model=search>
<select ng-model=searchBy>
    <option value="$">All</option>
    <option value="Name">Name</option>
    <option value="DoB">Date of birth</option>
    <option value="Hobbies">Hobby</option>
</select>

<div ng-repeat="user in users | filter:searchFilter">
    <div>{{user.Name}}</div>
    <div>{{user.DoB | date: "MM/dd/yyyy"}}</div>
    <div ng-repeat="hobby in user.Hobbies">{{hobby}}</div>
</div>

在 javascript 中:

 Object.defineProperty($scope, "searchFilter", {
            get: function () {
                var out = {};
                out[$scope.searchBy || "$"] = $scope.search;
                return out;
            }
        });

这仅适用于名称列。对于日期列,格式有所不同,并且由于爱好在内部循环中,因此即使搜索文本在爱好中,用户也不会显示在列表中。有人可以提供满足所有这些值的过滤器吗?

TIA。

【问题讨论】:

  • 您尝试实现此目的的任何代码?

标签: javascript angularjs angularjs-filter


【解决方案1】:

可能有更好的解决方案,但这可能有效:

JavaScript:

Object.defineProperty($scope, "searchFilter", {
  get: function () {
    var out = {};
    var search = $scope.search;
    if(!search) {
      return {'$': ''};
    }
    if($scope.searchBy === 'DoB') {
      search = new Date(search).getTime();
    }
    if($scope.searchBy === 'Hobbies') {
      $scope.users.forEach(function(n) {
        n.hobbyStr = n.Hobbies.join(',');
      });
      $scope.searchBy = 'hobbyStr';
    }
    out[$scope.searchBy || "$"] = search;
    return out;
  }
});

这是plnkr

【讨论】:

  • 这个 plnkr 不能正常工作?对于出生日期,它没有显示任何内容。不过,它对爱好有用。
  • @Jenny :假设您选择出生日期并输入可接受的日期格式(05.01.99、05-01-1999 等),它适用于出生日期
猜你喜欢
  • 1970-01-01
  • 2015-10-20
  • 2018-03-06
  • 1970-01-01
  • 2016-09-24
  • 2016-06-06
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多