角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
答
让我们使用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-模型
你问这个删除与去除型人问题早一点?你应该在角度控制器中处理这个问题。这将是知道什么是可用的json内容 – Aravind
没有这是一个不同的问题。 JSON结构虽然相同。 –
但我的建议是一样的。在你的控制器中有过滤部分 – Aravind