如何使用AngularJS过滤子值的ng-repeat

时间:2012-11-27 19:01:55

标签: angularjs

我使用ng-repeat创建了一个基于数组重复行的简单表。 我添加了一个类似to this example的过滤器。

当我尝试过滤嵌套对象时出现问题。它总是一个单独的对象,基本上它是我当前对象的父对象,但它是完整的对象,而不仅仅是FK值。

如果我使用filterText.educationCenter.name,它会过滤表格中的所有行,即使清除过滤器也不会返回它们。我必须完全重装。

如果我只过滤filterText.educationCenter它会工作,但它会搜索整个对象的所有字段。

我希望保持JSON不变,并根据educationCenter对象的名称过滤表结果。

我的HTML

Search: <input ng-model="filterText.$"/>
<input ng-model="filterText.city"/>
<input ng-model="filterText.educationCenter.name"/>

<tr ng-repeat="course in courses | filter:filterText | startFrom:currentPage*pageSize | limitTo:pageSize">
                    <td width="145">{{course.city}}</td>
                    <td width="145">{{course.educationCenter.name}}</td>
...

我的JSON来自数组的单个对象

{"id":"108"
,"city":"My City"
,"educationCenter":{"id":"3"
                   ,"description":"This is the ed center description"
                   ,"name":"test ed center 1"}
,"noOfDays":"1"}

1 个答案:

答案 0 :(得分:0)

正如@fastreload建议的那样,我认为你必须制作自己的过滤器。

以下是递归过滤器的示例。 (虽然它不支持$表示法,但我确信它缺失了  一些边缘案例支持。)

app.filter('recursiveFilter', function() {
  var compare = function(input_, cond_) {
    if (!cond_) return true;
    if (typeof input_ == "string" && typeof cond_ == "string") {
      return (new RegExp(cond_)).test(input_);
    } else if (typeof input_ == "object" && typeof cond_ == "object") {
      for (var s in cond_) {
        if (!compare(input_[s], cond_[s])) return false;
      }
      return true;
    }
    return false;
  };

  return function(inputs, cond) {
    return $.grep(inputs, function(input) {
      return compare(input, cond);
    });
  };
});