Question

我有一个类似的超大阵列：

    $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提供的颜色。然后我需要另一个输入，让我选择John Doe为这些颜色数量工作的项目类型......等等最后，我想得到所有选项的价格

我对如何在angularjs（版本1.5.8）上构建它感到非常迷失

还有一些东西告诉我，我应该以比那个庞大阵列更好的方式订购我的数据。

有关这两个问题的任何建议吗？

谢谢！

Answer 1

基本上你把它设置为使组合框基于之前的组合框（原谅愚蠢的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

您必须确保包含＆＃39; angular.filter＆＃39;依赖项和plnkr顶部的.js文件。您可能还必须确保过滤匹配整个单词，而不仅仅是部分，但这应该足以让您开始。

如何在Angular中的对象数组上构造多个选择选项

1 个答案: