Question

我有以下列表，我需要使用ui-select创建多个多选下拉列表

[
   {
      "Id":1,
      "name":"Return on Equity (IFRS)",
      "type":"profitability",

   },
   {
      "Id":2,
      "name":"Return on Assets (IFRS)",
      "type":"profitability",

   },
   {
      "Id":3,
      "name":"EBITDA Margin (IFRS)",
      "type":"profitability",

   },
   {
      "Id":4,
      "name":"EBIT Margin (IFRS)",
      "type":"profitability",

   },
   {
      "Id":5,
      "name":"Net Profit Margin (IFRS)",
      "type":"profitability",

   },
   {
      "Id":8,
      "name":"Cash Ratio",
      "type":"liquidity",

   },
   {
      "Id":9,
      "name":"Quick Ratio",
      "type":"liquidity",

   },
   {
      "Id":10,
      "name":"Current Ratio",
      "type":"liquidity",

   },
   {
      "Id":11,
      "name":"Net Financial Liabilities",
      "type":"debt",

   }
];

我需要能够选择多种＆＃34;类型＆＃34;在第一个下拉列表的基础上，相应的＆＃34;名称＆＃34;应该在第二个下拉列表中显示。我似乎遇到了障碍。任何帮助将不胜感激。

这是我到目前为止所尝试的。 Plunker

Answer 1

让我们使用2个自定义过滤器：

app.filter('unique', function() {
  return function(collection, keyname) {
    return Object.keys(collection.reduce((res, curr) => {
      res[curr.type] = curr;
      return res;
    }, {}));
  };
});

app.filter('matchType', function() {
  return function(collection, keynames) {
    return collection.filter(item => ~keynames.indexOf(item.type));
  };
});

unique 过滤器返回具有唯一类型的字符串数组，并按所选类型返回 matchType 过滤器数组。 HTML：

<ui-select multiple 
           ng-model="ctrl.multipleDemo.type" 
           theme="bootstrap" 
           style="width: 800px;">
<ui-select-match placeholder="Select type...">{{$item}}</ui-select-match>
  <ui-select-choices repeat="type in ctrl.people | unique : 'type'">
    <div ng-bind-html="type | highlight: $select.search"></div>
  </ui-select-choices>
</ui-select>

<pre>{{ ctrl.multipleDemo.type | json }}</pre>

<br><br>

<ui-select multiple 
           ng-model="ctrl.multipleDemo.name" 
           ng-disabled="!ctrl.multipleDemo.type.length" 
           theme="bootstrap" 
           style="width: 800px;">
  <ui-select-match placeholder="Select name...">{{$item.name}}</ui-select-match>
  <ui-select-choices repeat="person in ctrl.people | matchType : ctrl.multipleDemo.type">
    <div ng-bind-html="person.name | highlight: $select.search"></div>
  </ui-select-choices>
</ui-select>

<pre>{{ ctrl.multipleDemo.name | json }}</pre>

plunker：http://plnkr.co/edit/6aqPwuRwoJdHUmvFOquI?p=preview

TODO：当从第一个选择中删除类型时，请务必从第二个 ng-model 中删除已删除类型的人

Angular ui-select多个下拉过滤器

1 个答案: