0

それを理解することはできません！私が達成したいのは、別のドロップダウンがそれを使用するようにソースをフィルタリングできるようにすることですが、データは少なくなります。

たとえば、最初のドロップダウンに「Adam」と入力すると、2 番目と 3 番目のドロップダウンには検索用の 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>

これは、http : //plnkr.co/edit/soaP2RFE8ordXkD9nbLN?p=preview でプレイできるプランカーです。

4

1 に答える 1

0

これを実現するには2つの方法があります...そこで作成したカスタムフィルターを介して2番目のフィルターを渡すか、単に分割することで 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>

2 番目のフィルターを ng-repeat のアイテムの正しい属性に一致させていることを確認してください (ui-select はオプションではなく ng-repeat を使用するため、repeat の代わりに ng-repeat について言及します)。

編集: これがあなたの例です: http://plnkr.co/edit/fvUnpCtwiRfI4VkH6RC9?p=preview

于 2015-08-07T00:07:28.223 に答える