在 angularJS 中使用多维数组创建表单

Question

我想要实现的是一种使用 angularJS 中的多维数组自行创建的表单。到目前为止，我已经能够根据数组 "components" 中的多个条目创建多个 select。然后我想取第一个数组的名称用于 select 标签。

从那里我希望第二个数组存储所有计算机部件并在 select 输入中提供选项。

问题是：

为什么 header 没有被正确加载？（代码片段一，第 4 行）
如何在第 5 行写 ng-repeat 属性？

如何编写多维数组的表达式以提取第 5 行该类别中的组件？

<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>

这是数组，请注意数组的其余部分不存在，它会继续进行 6-7 种更多的零件类型:

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

抱歉英语不好，以防万一。

首先修正components数组，partCost后面少了一个','

事实是，如果您想以相同的方式遍历组件的所有部分，则应以相同的方式将它们定义到对象中。例如，不要使用 CPU 或 GPU 来生成零件数组，因为您应该使用该键在 ng-repeat 上迭代，不推荐这样做。

我会将所有组件对象键更改为 "parts"。那么这个 html 应该为你做。我在 select 选项上添加了 "value" 属性，如果你想以某种方式存储用户 select 的内容，你将需要它。

此外，不要在 ng-something 属性上使用 {} 括号（就像您对 ng-model 所做的那样）。因为 angular 已经知道您正在使用该属性的范围值。

<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>

一个"component"数组的例子

{
    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,

      }
    ]
}

在 angularJS 中使用多维数组创建表单

creating a form using multidimensional arrays in angularJS

javascript

multidimensional-array

angularjs

angularjs-ng-repeat