如何在同一个 json 对象上 select 并使用由 ng-options 填充的多个 select 框进行过滤？

Question

我正在尝试显示结构如下的 json 对象的数据列表：

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

我想要一个 select 行为选择框：任何/已购买的物品等。上面的 selection 将显示所有 actions.category 数据及其值。

第二个复选框将由唯一类别填充并充当过滤器，因此它将在第一次加载 Any 行为时显示所有类别。

它现在正在为行为 select 框和输出工作，第二个 select 框也填充了适当的唯一类别，但是，当 selection 被创建时对于操作，第二个 select 框基本上是清空的。

这是怎么回事，如何实现？

这是我的 Plunker：http://plnkr.co/edit/AA0lsuDd32Z1TPmWgkCx?p=preview

Answer 1

我在你的控制器中没有看到 selectBehaviorAction 方法运行 witn ng-change。我分叉了你的笨蛋。它按您预期的那样工作。我只是改变了将数据绑定到 ng-options 的方式。请验证。

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>

如何在同一个 json 对象上 select 并使用由 ng-options 填充的多个 select 框进行过滤？

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

angularjs

filter

angularjs-scope

angularjs-ng-repeat

angularjs-ng-options