Question

我尝试显示来自json对象的数据列表，如下所示：

＆＃13;

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

＆＃13;

我想要一个选择框用于行为选择：任意/购买物品/等对其的选择将显示所有actions.category数据及其值。

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

现在它正在用于行为选择框和输出，第二个选择框也填充了适当的唯一类别，但是，当对动作进行选择时，第二个选择框基本上会自行清空。

发生了什么以及如何实现这一目标？

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

Answer 1

我没有在控制器中看到运行更改的selectBehaviorAction方法。我分叉了你的傻瓜。它按预期工作。我刚刚改变了将数据绑定到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对象上选择和过滤由ng-options填充的多个选择框？

1 个答案: