How Do I Structure Multiple Select Options Over an Array of Objects in Angular
Michael
I have an super big array similar to this:
$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
}]
Im building a proposal maker, so I need our business employees to select which provider option they'll be using. (For you to understand these providers just put a logo on our items, and that array of objects is really a list of the prices they charge by quantity of colors, type of item and quantity of items)
The thing is, I want to create a select input with options to first choose which provider we will be using, let's say we settle with John Doe. Then I want a select input to choose the quantity of colors, but will only offer those that John Doe offers. Then I need another input which will let me choose the type of items that John Doe works for that quantity of colors... and so on Finally I'd like to get the price for all that options
I'm getting quite lost on how to build this on angularjs (version 1.5.8)
Also something tells me I should order my data in a better way than that huge array.
Any suggestion on both issues?
Thanks!
KreepN
Basically you set it up to have the comboboxes be based off the previous ones (excuse the silly html, it was for demo purposes):
<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>
You'll have to make sure you include 'angular.filter' dependency and the .js file at the top of the plnkr. You may also have to make sure the filtering matches whole words, and not just parts, but this should be more than enough to get you started.
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
How do I unit test a function that loops over objects?
- 2
Angular JS Multiple Select Options添加了额外的？选项
- 3
How do I select list of generic objects in abstract service using CriteriaQuery
- 4
How to show dependent select boxes options in angular js
- 5
How do I iterate over a file?
- 6
How do I customize the OS X Menu Bar options in openFrameworks?
- 7
How do I aggregate over ordered subsets of rows in SQL?
- 8
How do I modularize polyfills in Angular?
- 9
How do I count selected checkboxes in Angular?
- 10
SQL Server SET FMTONLY is deprecated. How do you get the structure of multiple resultsets?
- 11
How do I highlight (select) text in Text widget with a button click?
- 12
How do I select a subset of columns with diesel-rs?
- 13
How do I get to all of the command line options described inside of clang?
- 14
How do I compile the latest apache2 on ubuntu using the original layout, configuration and configure options
- 15
除了在select元素上，如何使用Angular ng-options？
- 16
How do I use the mediator pattern with multiple instances of a mediator in Javascript?
- 17
How do I print multiple images to one page on Chrome OS?
- 18
How do I rename multiple files by removing everything but numbers?
- 19
Elasticsearch - How do I query for results where a specific field has changed over time
- 20
How do I calculate the difference over time using one database table?
- 21
Warning: Do not dispose objects multiple times
- 22
options_for_select 和 i18n
- 23
How do I deserialize an array with indexes using jackson
- 24
How do I convert a numpy array into a pandas dataframe?
- 25
how do I find the closest value to a given number in an array?
- 26
How do I get a value from an associative array using Swift
- 27
how do I convert a double array in C to python list?
- 28
How do I convert a Zip into an array in rust 0.8?
- 29
How to use an array of objects properly
我来说两句