角度のマテリアルチェーン配列からmd-selectを組み合わせて入力を入力配列

Question

角度材のチェーン結合には少し問題があります。私は、このソリューションlink to jsfiddleを「md-select」と「md-option」を使用して「置き換え」たいと思っています。

どのように動作する必要がありますか？シンプル。 シナリオ：

1. 最初にmd-select：selectメーカー。
2. 第2のmd-select：選択モデル
3. アレイから価格を値としてテキスト入力に配置します。

アレイ構造体：私は何をしたいか

メーカー
-Models
--model（モデル名と価格）

もう一つは、のように、これらのフォーム入力からの配列ですこれは：

master = [ 
    { 
    "product": { 
     "name": "1936 Harley Davidson El Knucklehead", 
     "price": 24.23 
    } 
    } 
] 

誰でも助けてくれますか？ショーをするか、どうすればいいのか教えてください。 私は非常に助けに感謝します。

よろしく

Answer 1

角度素材と

var app = angular.module('app', ['ngMaterial']); 
 

 
app.controller('SelectController', function ($scope) { 
 
     // Data taken from KnockoutJs cart example 
 
     $scope.sampleProductCategories = [ 
 
      { 
 
      "name": "Classic Cars", 
 
       "products": [ 
 
       { 
 
       "name": "1948 Porsche 356-A Roadster", 
 
        "options":[ 
 
         {"value": "Color", 
 
         "options":[ 
 
         {"value": "Red"}, 
 
         {"value":"Black"} 
 
         ],          
 
        }, 
 
         {"value":"Seats", 
 
         "options":[ 
 
         {"value": "Leather"}, 
 
         {"value":"Cloth"} 
 
         ],  
 
         
 
         }, 
 
         
 
        {"value":"Warranty", 
 
         "options":[ 
 
         {"value": "2 Year"}, 
 
         {"value":"3 Year"} 
 
         ],  
 
         
 
         } 
 
         
 
        ], 
 
       "price": 53.9 
 
       }, 
 
       { 
 
       "name": "1948 Porsche Type 356 Roadster", 
 
       "price": 62.16 
 
       }, 
 
       { 
 
       "name": "1949 Jaguar XK 120", 
 
       "price": 47.25 
 
       } 
 
      ] 
 
      
 
      }, 
 
      { 
 
      "name": "Motorcycles", 
 
      "products": [ 
 
       { 
 
       "name": "1936 Harley Davidson El Knucklehead", 
 
       "price": 24.23 
 
       }, 
 
       { 
 
       "name": "1957 Vespa GS150", 
 
       "price": 32.95 
 
       }, 
 
       { 
 
       "name": "1960 BSA Gold Star DBD34", 
 
       "price": 37.32 
 
       } 
 
      ] 
 
      
 
      }, 
 
      { 
 
      "name": "Planes", 
 
       "products": [ 
 
       { 
 
       "name": "1900s Vintage Bi-Plane", 
 
       "price": 34.25 
 
       }, 
 
       { 
 
       "name": "1900s Vintage Tri-Plane", 
 
       "price": 36.23 
 
       }, 
 
       { 
 
       "name": "1928 British Royal Navy Airplane", 
 
       "price": 66.74 
 
       }, 
 
       { 
 
       "name": "1980s Black Hawk Helicopter", 
 
       "price": 77.27 
 
       }, 
 
       { 
 
       "name": "ATA: B757-300", 
 
       "price": 59.33 
 
       } 
 
      ] 
 
      
 
      } 
 
     ]; 
 
    }); 
 

 
angular.bootstrap(document, ['app']); 
 

 
      

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css"/> 
 

 
<!-- Angular Material requires Angular.js Libraries --> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script> 
 

 
    <!-- Angular Material Library --> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script> 
 
    
 
<div ng-controller="SelectController"> 
 
    <div layout="row"> 
 
    <md-input-container style="margin-right: 10px;"> 
 
     <label>Catgory</label> 
 
     <md-select ng-model="category"> 
 
      <md-option ng-repeat="c in sampleProductCategories" ng-value="c">{{c.name}}</md-option> 
 
     </md-select> 
 
     </md-input-container> 
 
    
 
    <md-input-container style="margin-right: 10px;"> 
 
     <label>Product</label> 
 
     <md-select ng-model="categoryItem"> 
 
      <md-option ng-repeat="p in category.products" ng-value="p">{{p.name}}</md-option> 
 
     </md-select> 
 
     </md-input-container> 
 
    
 
    <md-input-container style="margin-right: 10px;"> 
 
     <label>SubChild</label> 
 
     <md-select ng-model="subChild"> 
 
      <md-option ng-repeat="o in categoryItem.options" ng-value="o">{{o.value}}</md-option> 
 
     </md-select> 
 
     </md-input-container> 
 
    
 
    <md-input-container style="margin-right: 10px;"> 
 
     <label>Level4</label> 
 
     <md-select ng-model="level4"> 
 
      <md-option ng-repeat="o in subChild.options" ng-value="o">{{o.value}}</md-option> 
 
     </md-select> 
 
     </md-input-container> 
 
    
 
</div> 
 
    <hr /> 
 
    category={{category.name}}<br/> 
 
    product={{categoryItem.name}}<br/> 
 
    subChild={{subChild.value}}<br/> 
 
    level4={{level4.value}}<br/> 
 
    
 
</div>