javascript - Angular Material chain combine via md-select from arrays, form inputs array -
i have little problem chain combine in angular material. want "replace" solution link jsfiddle material using md-select , md-option.
how must works? simple. scenario:
- first md-select: select e.g. manufacturer.
- second md-select: select e.g. model
- place price array text input value.
array struct:
manufacturer
-models
--model (model name , price)
one more thing want array these form inputs this:
master = [ { "product": { "name": "1936 harley davidson el knucklehead", "price": 24.23 } } ] could me? show or tell me how can it. i'll appreciate help.
regards
please have @ code snippet below angular material
var app = angular.module('app', ['ngmaterial']); app.controller('selectcontroller', function ($scope) { // data taken 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
Post a Comment