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

Question

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

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

问题是这样的:

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

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

  <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

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

首先更正组件数组，partCost 后面缺少一个“,”。

问题是，如果您想以相同的方式迭代所有组件的部分，则应该以相同的方式将它们定义到对象中。例如，不要使用 CPU 或 GPU 来拥有部件数组，因为您应该使用该键来迭代 ng-repeat，这是不推荐的。

我会将所有组件零件对象键更改为“零件”。那么这个 html 应该可以帮你完成。我已经在选择选项中添加了“value”属性，如果您想以某种方式存储用户选择的内容，您将需要它。

此外，不要在 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>

数组中“组件”的示例

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

      }
    ]
}