Angular Material链通过md-select与数组相结合，形成输入数组

Question

我对Angular Material中的链式组合有一点问题。我想使用md-select和md-option将此解决方案link to jsfiddle“替换”为Material。

它必须如何运作？简单。 情形：

1. 首先是md-select：选择例如制造商。
2. 第二个md-select：选择例如模型
3. 将数组中的价格作为值放入文本输入。

数组结构：


制造商
-Models
- 型号（型号名称和价格）


我想要做的另一件事是来自这些表单输入的数组：

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

有人能帮帮我吗？显示或告诉我如何做到这一点。 我非常感谢您的帮助。

此致

Answer 1

请使用Angular Material

查看下面的code snippet

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>