AngularJS and Typeahead : Accessing an array within an array based on a selected value

Question

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.

colinwurtz · Accepted Answer · 2018-01-26 15:11:51Z

1

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?

answered Jan 26, 2018 at 15:11

colinwurtz

7231 gold badge7 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS and Typeahead : Accessing an array within an array based on a selected value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related