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,

        },

        ]
    },

Brian Suárez · Accepted Answer · 2017-10-24 19:57:21Z

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,

      }
    ]
}

answered Oct 24, 2017 at 19:57

Brian Suárez

681 silver badge7 bronze badges

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

3 Comments

jbibb917 Over a year ago

The code doesn't work for me, you have helped me understand the problem though so I will have a better chance of tackling it now!

jbibb917 Over a year ago

Forget what i just said, the solution didnt reference ng-app or ng-controller, once that has been slotted in it works perfectly! :D thank you very much

Brian Suárez Over a year ago

Yea I forgot to tell you I removed the ng-controller reference D: Glad to help tho

Collectives™ on Stack Overflow

creating a form using multidimensional arrays in angularJS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related