0

想不通！我想要实现的是能够过滤源，以便另一个下拉列表将使用它但数据更少。

例如，我在第一个下拉列表中输入了 Adam，第二个和第三个下拉列表将只有 2 行用于他们的搜索。

这是您将在 plunker 中看到的 html 片段

<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>

这是一个 plunker，您可以使用 http://plnkr.co/edit/soaP2RFE8ordXkD9nbLN?p=preview

4

1 回答 1

0

有两种方法可以实现这一点......您可以通过您在那里制作的自定义过滤器传入第二个过滤器，也可以使用 ng-repeat 支持的内置过滤器与 ui-select 一起使用，只需拆分您打算用逗号过滤的每个值。下面是一个例子：

  <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>

只需确保您将第二个过滤器与 ng-repeat 中项目的正确属性匹配（我提到 ng-repeat 而不是 repeat，因为 ui-select 使用 ng-repeat 而不是选项）。

编辑：这是你的例子：http ://plnkr.co/edit/fvUnpCtwiRfI4VkH6RC9?p=preview

于 2015-08-07T00:07:28.223 回答