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;

  }
});

带有多个滤波器选项的角度ng-repeat

1 个答案: