I am new in the area concerning AngularJS and would like help figuring this out: In my controller I have the following list/object:
$scope.languageModel = {
brands: [{ id: 1, name: 'ALGS' }, { id: 2, name: 'BLVT' }],
commodities: [
{
id: 1,
name: 'Apples',
varieties: [{ id: 1, name: 'GS' }, { id: 2, name: 'GX' }],
sizes: [{ id: 1, name: 'S' }, { id: 2, name: 'M' }],
qualities: [{ id: 1, name: 'LQ' }, { id: 2, name: 'GQ' }]
},
{
id: 2,
name: 'Oranges',
varieties: [{ id: 1, name: 'OR' }, { id: 2, name: 'ZO' }],
sizes: [{ id: 1, name: 'S' }, { id: 2, name: 'M' }],
qualities: [{ id: 1, name: 'LQ' }, { id: 2, name: 'GQ' }]
}
]
}
The languageModel serve as the object from which data is populate into:
<th>
<input id="brand"
type="text"
ng-model="selected.brand"
ng-required="true"
placeholder="Brand"
uib-typeahead="brand.name for brand in languageModel.brands"
class="form-control">
</th>
<th>
<input id="commodity"
type="text"
ng-model="selected.commodities"
ng-required="true"
placeholder="Commodity"
uib-typeahead="commodities.name for commodities in
languageModel.commodities"
class="form-control">
</th>
<th>
<input id="variety"
type="text"
ng-model="selected.variety"
ng-required="true"
placeholder="Variety"
uib-typeahead="varieties.name for varieties in
getAttributeType(selected.commodity.varieties, 'varieties')"
class="form-control">
</th>
<th>
<input id="size"
type="text"
ng-model="selected.size"
ng-required="true"
placeholder="Size"
uib-typeahead="size.name for sizes in
getAttributeType(selected.commodity, 'size')"
typeahead-on-select="setItem('size')"
class="form-control">
</th>
These are of course located in a table. All the above mentioned code is what I currently have. What I would like to know is how to ensure that #variety (same goes for #size) is populated by the #commodity selected.
For example if I had selected Apples as my #commodity then the column for #variety is populated by the varieties in the list of the Apples commodity.
The #brands and #commodity populate fine and work as they should, however getAttributeType() doesn't seem to work and when I run the app the boxes following on #commodity is basically treated as normal textboxes.
Should this:
uib-typeahead="size.name for sizes in
getAttributeType(selected.commodity, 'size')"
be:
uib-typeahead="size.name for sizes in
getAttributeType(selected.commodity.sizes, 'size')"
If that doesn't work can you post a plunker or codepen?