angularJSの多次元配列を使用してフォームを作成

Question

私が達成しようとしているのは、angularJSの多次元配列を使用してそれ自身を作成するフォームです。私はこれまでアレイ "コンポーネント"のエントリ数に基づいて複数の選択を作成することができました。次に、選択ラベルに使用する最初の配列の名前を取得します。

そこから、私は2番目の配列がすべてのコンピュータ部品を格納し、select入力内にオプションを提供することを望んでいました。ここで

は問題です：

• ヘッダが正しくロードされていないのはなぜ？ （Code snippet one、line 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の後ろに '、'がありません。

すべてのコンポーネントのパーツを同じ方法で繰り返したい場合は、同じ方法でオブジェクトに定義する必要があります。たとえば、ng-repeatで反復処理するには、そのキーを使用する必要があるため、CPUやGPUを使用して配列の配列を持たないでください。これはお勧めしません。

私はすべてのコンポーネントパーツオブジェクトキーを「パーツ」に変更します。次に、このhtmlはあなたのためにそれを行う必要があります。選択肢に「値」プロパティを追加しました。ユーザーが何を選択したかを何らかの形で保存したい場合は、必要になります。

また、ng-something属性には{}括弧を使用しないでください（ng-modelの場合と同様）。角度は既にあなたがその属性にスコープ値を使用していることを知っています。

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

     } 
    ] 
}