角UI，选择多个下拉过滤

我有以下的列表，从中我需要用创建多个多选择下拉UI选角UI，选择多个下拉过滤

[ 
    { 
     "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", 

    } 
];

我需要能够在选择多个“类型”第一个下拉列表，在第二个下拉列表中应显示相应的“名称”。我似乎遇到了这个障碍。任何帮助，将不胜感激。

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

来源

2016-11-27 Ajay K

你问这个删除与去除型人问题早一点？你应该在角度控制器中处理这个问题。这将是知道什么是可用的json内容 – Aravind

没有这是一个不同的问题。 JSON结构虽然相同。 –

但我的建议是一样的。在你的控制器中有过滤部分 – Aravind

让我们使用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)); 
    }; 
});

独特过滤器返回字符串的具有独特的类型和使用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-模型

来源

2016-11-27 21:09:45 Andriy

角UI，选择多个下拉过滤

回答

相关问题