creating a form using multidimensional arrays in angularJS

Question

What I'm trying to achieve is a form that creates itself using multidimensional arrays in angularJS. I have so far been able to create multiple selects based upon a number of entries in the array "components". I then want to take the name of the first array to use for the select label.

From there I wanted the second array to store all of the computer parts and provide options within in the select input.

Here is the problem:

• Why is the header not being correctly loaded in? (Code snippet one, line 4)
• How do I write the ng-repeat property on line 5?

• how do I write the expression for the multidimensional array to pull through the components within that category on line five?

  <form name="buildForm" ng-submit="buildSubmit()" ng-app ng-controller="buildController">
      <div class="row" class="col-md-6">
          <div>
              <label for="gpu"><h3>{{ component.compName }}</h3></label>
                  <select class="form-control" id="{{ component.selectName }}" ng-model="{{ component.selectName }}" ng-repeat="component in components">
                      <option ng-repeat=" ???????? ">{{ ?????????? }}</option>
                  </select>
          </div>
          <div class="col-md-6">
              <!-- ng-src ng-show image goes here -->
  
          </div>
      </div>
  
  
  </form>
  

Here is the array(s), please note the rest of the array is not there, it does continue on for 6-7 more part types:

app.controller ('buildController', ['$scope', function($scope){

$scope.components = [
    {
        compName: 'Graphics Card',
        selectName: 'gpuSelect',
        GPU:[
        {
            partName: 'Nvidia 1080',
            partCost: '200'
            partID: 1,

        },
        {
            partName: 'Nvidia 1070',
            partCost: '150'
            partID: 2,

        },
        {
            partName: 'Nvidia 1060',
            partCost: '100'
            partID: 3,

        },

        ]
    },
    {
        compName: 'Central Processor Card',
        selectName: 'cpuSelect',
        CPU:[
        {
            partName: 'Intel i7',
            partCost: '200'
            partID: 4,

        },
        {
            partName: 'Intel i5',
            partCost: '150'
            partID: 5,

        },

        ]
    },

Answer 1

Sorry for bad english just in case.

First of all correct the components array, there's a missing ',' after partCost.

The thing is, if you want to iterate through all of the components' parts in the same way, they should be defined into the object in the same way. For example, dont use CPU or GPU to have an array of parts, as you should use that key to iterate on the ng-repeat, which is not recommended.

I'd change all of the components parts object keys to "parts". Then this html should do it for you. I've added "value" property onto the select options, if you want to store in some way what the user selects, you will need it.

Also, don't use {} brackets on ng-something attributes (as you did for the ng-model). As angular already knows that you are using a scope value for that attribute.

<form name="buildForm" ng-submit="buildSubmit()">
    <div class="row col-md-6">
        <div ng-repeat="component in components">
            <label><h3>{{ component.compName }}</h3></label>
                <select class="form-control" id="{{ component.selectName }}" ng-model="component.selectedPart">
                    <option ng-repeat="part in component.parts" value="{{ part.partID }}">{{ part.partName }}</option>
                </select>
        </div>
        <div class="col-md-6">
            <!-- ng-src ng-show image goes here -->
        </div>
    </div>
</form>

An example of a "component" in the array

{
    compName: 'Graphics Card',
    selectName: 'gpuSelect',
    selectedPart : null,
    parts: [
      {
          partName: 'Nvidia 1080',
          partCost: '200',
          partID: 1,

      },
      {
          partName: 'Nvidia 1070',
          partCost: '150',
          partID: 2,

      },
      {
          partName: 'Nvidia 1060',
          partCost: '100',
          partID: 3,

      }
    ]
}