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

Question

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

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

问题来了：

• 为什么没有正确加载标头？ （代码 sn-p 一，第 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

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

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

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

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

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

      }
    ]
}