Как выбрать и отфильтровать несколько полей выбора, заполненных ng-опциями, над одним и тем же объектом json?

Я пытаюсь отобразить список данных из объекта 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}]
}
....
}]

Мне нужно одно поле выбора для выбора поведения: Any / Purchased Item / etc. выбор, в котором будут отображаться все данные action.category и их значения.

Второй флажок будет заполнен уникальными категориями и будет действовать как фильтр, поэтому он будет отображать их все при первой загрузке любого поведения.

Он работает прямо сейчас для поля выбора поведения и выходных данных, также второе поле выбора заполняется соответствующими уникальными категориями, однако, когда делается выбор для действий, второе поле выбора в основном опустошается.

Что происходит и как этого можно добиться?

Вот мой плункер: http://plnkr.co/edit/AA0lsuDd32Z1TPmWgkCx?p=preview


filter angularjs angularjs-ng-repeat angularjs-scope angularjs-ng-options
person somedirection    schedule 01.05.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я не видел метода selectBehaviorAction в вашем контроллере, который запускается с 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>
person bhochhi    schedule 04.05.2015
comment
Это был билет. Использование $watch было определенно тем, чего не хватало. Спасибо! - person somedirection; 05.05.2015