gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 05:47:29 24 4
gpt4 key购买 nike

我有一个与此类似的 super 大数组:

    $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
}]

我正在构建一个提案生成器,因此我需要我们的业务员工选择他们将使用的提供商选项。 (为了让您了解这些提供商,只需在我们的商品上贴上 Logo ,该对象数组实际上是他们按颜色数量、商品类型和商品数量收取的价格列表)

问题是,我想创建一个选择输入,其中包含首先选择我们将使用哪个提供商的选项,假设我们与 John Doe 达成和解。然后我想要一个选择输入来选择颜色数量,但只会提供 John Doe 提供的颜色。然后我需要另一个输入,让我选择 John Doe 为该颜色数量工作的项目类型......等等最后我想知道所有这些选项的价格

我对如何在 angularjs(版本 1.5.8)上构建它感到非常困惑

还有一些事情告诉我,我应该以比那个巨大数组更好的方式来排序我的数据。

对这两个问题有什么建议吗?

谢谢!

最佳答案

基本上,您将其设置为让组合框基于之前的组合框(请原谅愚蠢的 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

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

关于javascript - 如何在 Angular 中的对象数组上构造多个选择选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38381343/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com