Damian Damian - 19 days ago 7
AngularJS Question

Angular Material chain combine via md-select from arrays, form inputs array

I have a little problem with chain combine in Angular Material. I want to "replace" this solution link to jsfiddle to Material using md-select and md-option.

How must it works? Simple.
Scenario:


  1. First md-select: select e.g. Manufacturer.

  2. Second md-select: select e.g. Model

  3. Place a price from array to text input as value.



Array struct:


Manufacturer

-Models

--Model (model name and price)


One more thing what I want to do is array from these form inputs like this:

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


Could anyone help me? Show or tell me how can I do it.
I'll be very appreciate for help.

Regards

Answer

Please have a look at the code snippet below with Angular Material

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>

Comments