我如何結構中的多個選擇選項在對象的角度

陣列我有類似這樣的超級大數組：我如何結構中的多個選擇選項在對象的角度

$scope.providers = [{ 
providerName: 'John Doe', 
colors: 1, 
itemQuantity: 100, 
item: 'pen', 
price: 2,5 
}, 
{ 
providerName: 'John Doe', 
colors: 1, 
itemQuantity: 200, 
item: 'pen', 
price: 2 
}, 
providerName: 'John Doe', 
colors: 3, 
itemQuantity: 400, 
item: 'clock', 
price: 10 
}, 
providerName: 'Jane Doe', 
colors: 1, 
itemQuantity: 50, 
item: 'bag', 
price: 15 
}]

林建設方案製造商，所以我需要我們的企業員工選擇哪個供應商他們將使用的選項。（爲了您理解這些提供商只需在我們的商品上放置一個徽標，而這些物品實際上是按照顏色數量，商品類型和商品數量收取的價格列表）

事情是，我想創建一個帶有選項的選擇輸入，以便首先選擇我們將使用的提供商，假設我們與John Doe達成協議。然後，我想要一個選擇輸入來選擇顏色數量，，但只會提供那些John Doe提供的。然後，我需要另一種輸入，這將讓我選擇的項目是李四工程的顏色的數量型...等最後，我想獲得的價格爲所有選項

我如何在angularjs（版本1.5.8）上構建這個問題已經相當迷茫了。

另外一些東西告訴我，我應該以比那個巨大的數組更好的方式來排序我的數據。

對這兩個問題的任何建議？

謝謝！

來源

2016-07-14 Michael

有點混淆，你到現在爲止嘗試過什麼？ – developer033

就像這樣：http://imgur.com/IYrNrvf？下拉菜單全部基於前一個進行過濾，並且只顯示唯一值。 – KreepN

是的！這樣可行！謝謝！但是如何在角度上過濾基於prevoius選擇的下拉列表（以及如何顯示唯一值）？ – Michael

基本上你將它設置爲具有組合框是基於關閉以前的（請原諒的愚蠢的HTML，它是用於演示目的）：

Working Plnkr

<body ng-controller="MainCtrl"> 
    Provider: 
    <select ng-model="selectedProvider" ng-options="p.providerName as p.providerName for p in providers | unique:'providerName'">{{p}} </select>  
    <br/> 
    Selected Provider: {{selectedProvider}} 
    <br/> 
    <br/> 
    Number of Colors: 
    <select ng-model="selectedNumber" ng-options="n.colors as n.colors for n in providers | filter : {providerName:selectedProvider } | unique:'colors' "> </select>  
    <br/> 
    Selected Number: {{selectedNumber}} 
    <br/> 
    <br/> 
    Items: 
    <select ng-model="selectedItem" ng-options="i.item as i.item for i in providers | unique:'item' | filter : {providerName:selectedProvider, colors: selectedNumber}"> </select> 
    <br/> 
    Selected Item: {{selectedItem}} 
    <br/> 
    Distinct Prices: 
    <div ng-repeat="p in providers | filter : {providerName:selectedProvider, colors: selectedNumber, item: selectedItem}"> 
    <span>{{p.price}}</span> 
</div>

enter image description here

您必須確保您包含'angular.filter'依賴項和.js文件的頂部plnkr。您可能還必須確保過濾符合整個單詞，而不僅僅是部分，但這應該足以讓您開始。

來源

2016-07-15 13:30:56 KreepN

謝謝!!!!!!!!! ：d – Michael

我如何結構中的多個選擇選項在對象的角度

回答

相關問題