Search code examples
angularjsfilterangularjs-scopeangularjs-ng-repeatangularjs-ng-options

How to select and filter with multiple select boxes populated by ng-options over the same json object?

I'm attempting to display a list of data from a json object structured like so:

[{
    "behavior": "Any",
    "actions": [
        {"category": "Web Actions", "hva": "Item4 Product Page", "value": 5.3},
        {"category": "Web Actions", "hva": "Item Product Page", "value": -1.4},
        {"category": "Web Actions", "hva": "Item3 Product Page", "value": 2.4},
        {"category": "Web Actions", "hva": "Item Product Page", "value": -5.78},
        {"category": "Search", "hva": "Search: term", "value": 2.75},
        {"category": "Location", "hva": "Visited Mall", "value": 0.64},
        {"category": "Location", "hva": "Visited Movie Theater", "value": 0.65},
        {"category": "TV", "hva": "Watched Walking Dead", "value": -5.4},
        {"category": "TV", "hva": "Saw Advertisement for Brand", "value": 0.5}]
}, {
    "behavior": "Purchased Item",
    "actions": [
        {"category": "Web Actions", "hva": "Card Application", "value": 3.05},
        {"category": "Web Actions", "hva": "Item4 Product Page", "value": 4.56},
        {"category": "Web Actions", "hva": "Item Product Page", "value": 3.23},
        {"category": "Web Actions", "hva": "Item3 Product Page", "value": 0.4},
        {"category": "Web Actions", "hva": "Item Product Page", "value": -3.78},
        {"category": "Search", "hva": "Search: term", "value": -2.5},
        {"category": "Location", "hva": "Visited Mall", "value": 5.64},
        {"category": "Location", "hva": "Visited Movie Theater", "value": -0.6},
        {"category": "TV", "hva": "Watched Walking Dead", "value": -2.4},
        {"category": "TV", "hva": "Saw Advertisement for Brand", "value": 1.5}]
}
....
}]

I want one select box for the behavior choice: Any / Purchased Item / etc. a selection on that will display all the actions.category data and it's values.

The second checkbox will be populated by unique categories and act as a filter, so it will show all of them on first load of the Any behavior.

It is working right now for the behavior select box and outputs, also the second select box populates with the proper unique categories, however, when a selection is made for the actions, the second select box basically empties itself out.

What is going on and how can this be accomplished?

Here's My Plunker: http://plnkr.co/edit/AA0lsuDd32Z1TPmWgkCx?p=preview

Solution

  • I didn't see the selectBehaviorAction method in your controller that run witn ng-change. I forked your plunker. It's working as you expected. I just changed the way you have bind your data to ng-options. Please verify.

    http://plnkr.co/edit/6bAJHiNqjw9Lg3fBTcED?p=preview 

    <body>
    <div class="hva-container" ng-controller="MyController">
      <form>
        <label for="behaviors">Behavior</label>
        <select id="behaviors" data-ng-model="selectedBehavior" ng-options="option as option.behavior for option in behaviors |  orderBy:'behavior'"></select>
        <br />
        <br />
        <label for="filters">Filter</label>
        <select id="filters" ng-model="selectedCategory" ng-options="option.category as option.category for option in selectedBehavior.actions | unique: 'category'">
          <option value="">None</option>
        </select>
        <!-- {{selectedBehavior.actions}} -->
      </form>
      <br />
      <br />
      <div ng-show="selectedBehavior" ng-repeat="behavior in behaviors |
                filter: { behavior : selectedBehavior.behavior }">
        <div ng-repeat="action in selectedBehavior.actions | orderBy:'-value' | filter:selectedCategory:true ">
        {{action.category}}, {{action.hva}}, {{action.value}}
      </div>
      </div>
    </div>
  </body>