javascript - angular ng-repeat with multiple filter options - Stack Overflow

admin管理员组

文章数量:1434904

I have this JSON data:

{
  "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
    }]
  }]
}

Depending on what doorType you select, I'd like to filter the wood types. For example, if you select Raised Panel, I only want the woods that have a weight with Raised Panel to show up. So in this case, Alder and Beech would show, not Ash or Bamboo

Right now I am strictly using ng-repeat and it is displaying all the wood types. I've looked at the docs for ng-filter, but I am not sure how to apply it in a case where the weights object has multiple properties.

My current 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>

I am also open to changing my JSON if it makes more sense to do so.

EDIT

This was my solution:

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

and then:

$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;
}

I have this JSON data:

{
  "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
    }]
  }]
}

Depending on what doorType you select, I'd like to filter the wood types. For example, if you select Raised Panel, I only want the woods that have a weight with Raised Panel to show up. So in this case, Alder and Beech would show, not Ash or Bamboo

Right now I am strictly using ng-repeat and it is displaying all the wood types. I've looked at the docs for ng-filter, but I am not sure how to apply it in a case where the weights object has multiple properties.

My current 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>

I am also open to changing my JSON if it makes more sense to do so.

EDIT

This was my solution:

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

and then:

$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;
}

• javascript
• angularjs
• angularjs-ng-repeat

Share Improve this question Follow edited Aug 13, 2013 at 22:53 Ronnie asked Aug 13, 2013 at 19:49 RonnieRonnie 11.2k2222 gold badges8484 silver badges142142 bronze badges 3

• Checkout stackoverflow./questions/13711960/… – Christopher Marshall Commented Aug 13, 2013 at 19:51
• That is just changing the order. I need them to not appear which is why I believe I need a filter not an orderBy – Ronnie Commented Aug 13, 2013 at 19:58
• ahh my apologies, I misunderstood. – Christopher Marshall Commented Aug 13, 2013 at 20:00

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Try writing a custom filter, and using some kind of bination like this.

<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;

  }
});

本文标签： javascriptangular ngrepeat with multiple filter optionsStack Overflow