Complicated many-to-many relationship in dropdown search using AngularUI Select

Question

Can't figure it out! What I'd like to achieve is to be able to filter the source so that another dropdown will use it but with fewer data.

For example, I typed in Adam on the first dropdown, the 2nd and 3rd dropdowns will only have 2 rows for their searches.

Here is a snippet from the html which you'll see in the plunker

<p>Selected: {{person.filter1}}</p>
<ui-select ng-model="person.filter1" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
  <ui-select-match placeholder="firstname">{{$select.selected.firstname}}</ui-select-match>
  <ui-select-choices repeat="person in people | propsFilter: {firstname: $select.search}">
    <div ng-bind-html="person.firstname | highlight: $select.search"></div>
  </ui-select-choices>
</ui-select>

<p>Selected: {{person.filter2}}</p>
<ui-select ng-model="person.filter2" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
  <ui-select-match placeholder="company">{{$select.selected.company}}</ui-select-match>
  <ui-select-choices repeat="person in people | propsFilter: {company: $select.search}">
    <div ng-bind-html="person.company | highlight: $select.search"></div>
  </ui-select-choices>
</ui-select>

<p>Selected: {{person.filter3}}</p>
<ui-select ng-model="person.filter3" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
  <ui-select-match placeholder="age">{{$select.selected.age}}</ui-select-match>
  <ui-select-choices repeat="person in people | propsFilter: {age: $select.search}">
    <div ng-bind-html="person.age"></div>
  </ui-select-choices>
</ui-select>

Here is a plunker that you can play with http://plnkr.co/edit/soaP2RFE8ordXkD9nbLN?p=preview

Answer 1

There are two ways you can achieve this... You can either pass in a second filter via your custom filter you have made there or you can use the built-in filtering that ng-repeat supports alongside the ui-select by simply splitting up each value you intend to filter with a comma. An example is below:

  <p>Selected: {{person.filter1}}</p>
  <ui-select ng-model="person.filter1" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
    <ui-select-match placeholder="firstname">{{$select.selected.firstname}}</ui-select-match>
    <ui-select-choices repeat="person in people | propsFilter: {firstname: $select.search}">
      <div ng-bind-html="person.firstname | highlight: $select.search"></div>
    </ui-select-choices>
  </ui-select>

  <p>Selected: {{person.filter2}}</p>
  <ui-select ng-model="person.filter2" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
    <ui-select-match placeholder="company">{{$select.selected.company}}</ui-select-match>
    <ui-select-choices repeat="person in people | filter: {company: person.filter1.company}">
      <div ng-bind-html="person.company | highlight: $select.search"></div>
    </ui-select-choices>
  </ui-select>

  <p>Selected: {{person.filter3}}</p>
  <ui-select ng-model="person.filter3" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
    <ui-select-match placeholder="age">{{$select.selected.age}}</ui-select-match>
    <ui-select-choices repeat="person in people | filter: {age: person.filter1.age}">
      <div ng-bind-html="person.age"></div>
    </ui-select-choices>
  </ui-select>

Just be sure that you are matching the second filter to the correct attribute of the item in the ng-repeat (I mention ng-repeat instead of repeat because ui-select makes use of the ng-repeat rather than options).

EDIT: Here is your example: http://plnkr.co/edit/fvUnpCtwiRfI4VkH6RC9?p=preview