CODEWITHSUNDEEP
arraysangularjs
cfox
cfox

Reputation: 431

AngularJS - Search Filter nested array

AngularJS newbie trying to limit a search filter to one very nested array item. Here's a shot of my output:

<div ng-controller="listController">
  <input type="text" ng-model="searchMe" />
  <table class="table">
    <tr>
        <th>Product Name</th>
        <th>Color</th>
        <th>Size</th>
        <th>Features</th>
    </tr>
    <tr ng-repeat="p in prods | filter:searchMe">
        <td>{{p.products.1.ProductName}}</td>
        <td>{{p.products.1.Color}}</td>
        <td>{{p.products.1.Size}}</td>
        <td>
          <ul ng-repeat="feats in p.features">
            <li>{{feats}}</li>
          </ul>
        </td>
    </tr>
  </table>
</div>

Which displays all the items in the list correctly, including the additional features. Now there are at least another dozen items in the products array, including description, price, etc. The issue is if I search something in the box, it searches the entire array. Now I've tried changing the search input to:

<input type="text" ng-model="search.products.1.ProductName" />
<input type="text" ng-model="search.p.products.1.ProductName" />
<input type="text" ng-model="search.ProductName" />

However as soon as I type one character everything disappears. Yes I've also taken the "me" off the search filter (| filter:search). How can I bind the search to a specific item in a nested array? I'll also need to be able to search by features, but I'm hoping by solving this first it'll lead my to the features. Also my content is being pulled in by a json file if that makes a difference. The search features will eventually be checkboxes as well, and not text inputs, but I figure it shouldn't matter, I will still need to target the specific items (name, color, size, etc).

Thoughts/ideas/suggestions?

Upvotes: 1

Views: 619

Answers (1)

cfox
cfox

Reputation: 431

My solution for the time being is restructuring the json file. Maybe when my knowledge of Angular expands I'll be able to revisit.

Upvotes: 0

Related Questions