角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，選擇多個下拉過濾

回答

相關問題