javascript - 具有多个过滤器选项的 Angular ng-repeat

Question

我有这个 JSON 数据:

{
  "doorTypes": [
  {
    "name": "Flat Panel",
    "image": "doors/flatpanel.png",
    "type": "Wood"
  },
  {
    "name": "Raised Panel",
    "image": "doors/raisedpanel.png",
    "type": "Wood"
  },
  {
    "name": "Slab Door",
    "image": "doors/slabdoor.png",
    "type": "Wood"
  }],
  "woods": [
  {
    "name": "Alder",
    "image": "species/alder.png",
    "weights":[
    {
      "name": "Flat Panel",
      "weight": 1.19
    },
    {
      "name": "Raised Panel",
      "weight": 1.76
    },
    {
      "name": "Slab Door",
      "weight": 1.97
    }]
  },
  {
    "name": "Ash",
    "image": "species/ash.png",
    "weights":[
    {
      "name": "Flat Panel",
      "weight": 1.7
    }]
  },
  {
    "name": "Bamboo",
    "image": "species/bamboo.png",
    "weights":[
    {
      "name": "Slab Door",
      "weight": 2.7
    }]
  },
  {
    "name": "Beech",
    "image": "species/beech.png",
    "weights":[
    {
      "name": "Raised Panel",
      "weight": 2.27
    },
    {
      "name": "Slab Door",
      "weight": 2.54
    }]
  }]
}

根据您选择的doorType，我想过滤wood类型。例如，如果您选择 Raised Panel，我只希望显示具有 Raised Panel 重量的木材。所以在这种情况下，将显示 Alder and Beech，而不是 Ash 或 Bamboo

现在我严格使用 ng-repeat 并且它显示所有木材类型。我查看了 ng-filter 的文档，但我不确定如何在 weights 对象具有多个属性的情况下应用它。

我当前的 ng-repeat:

<ul class="touchcarousel-container">
  <li class="touchcarousel-item" ng-repeat="obj in currentObject">
    <div class="img-select" ng-click="setActive(this)" ng-class="{itemSelected : isActive(this)}">
      <div align="center">
        <img ng-src="resources/images/aventos/{{obj.image}}" />
      </div>
      <div class="img-title">{{obj.name}}</div>
    </div>
  </li>
</ul>

如果这样做更有意义，我也愿意更改我的 JSON。

编辑

这是我的解决方案:

<li class="touchcarousel-item" ng-repeat="obj in currentObject" ng-show="woodTypes(obj)">

然后:

$scope.woodTypes = function(obj)
{
    var shown = false;
    for (var i = 0; i < obj.weights.length; i++)
    {
        if (obj.weights[i].name == $scope.cabinetDetails.door.name)
        {
            shown = true;
            break;
        }
    }
    return shown;
}

Answer 1

尝试编写一个自定义过滤器，并使用像这样的某种组合。

<select ng-options="foo.blah for foo in foos" ng-model="selection"></select>
<li ng-repeat="obj in objects|filter:selection|filterFunction">{{obj}}</li>

.filter('filterFunction', function() {

  return function (objects) {

    var filter_objects = [];

    for (var i = 0; i < objects.length; i++) {
      for (var j = 0; j < objects[i].weights.length; j++) {
        if (objects[i].weights[j].name === "Raised Panel") {
          filter_objects.push(objects[i]);
        }
      }
    }

    return filter_objects;

  }
});