I have a unique collection of product names along with their respective versions stored in a multidimensional array. My goal is to design an interactive interface that allows users to first select a product from a drop-down menu and then choose the version number from a second drop-down menu. The second menu should dynamically display only the version numbers associated with the product selected in the first menu.
Below is a snippet of my multidimensional array:
[Object]0:
name: "Product 1"
versions: [Array]0:
number: "1.0"
number: "1.5.2"
1:
name: "Product 2"
versions: [Array]0:
number: "0.0"
number: "0.5"
Users can opt for multiple products selections, leading me to create an array to store these selections.
The setup of my controller is as follows:
app.controller('mainController', function ($scope) {
$scope.products = [{id: 1, name: '', versions: []}];
$scope.packages = [];
$scope.packages[0] = { id: 1, name: 'Product 1', versions: [{number: 1.0}, {number: 1.5}, {number: 2.0}]};
$scope.packages[1] = { id: 2, name: 'Product 2', versions: [{number: 0.1}, {number: 0.2}, {number: 0.3}]};
$scope.addProduct = function(){
var id = $scope.products.length + 1;
$scope.products.push({id: id, name: "", version: []});
};
});
The select boxes implementation using AngularJS looks like this:
<div ng-repeat="product in products">
<label>Product</label>
<select ng-model="product.product" ng-options="package.name for package in packages" class="form-control"></select>
<label>Version</label>
<select ng-model="product.versions" ng-options="version.number for version in product.versions" class="form-control"></select>
</div>
<button ng-click="addProduct()">Add Product</button>
I attempted to link the version select box with the currently selected product by setting up ng-options accordingly, but encountered issues.
You can view my current progress on jsFiddle here: http://jsfiddle.net/rkyu4rjq/
Your suggestions on effectively connecting the version selection with the chosen product would be greatly appreciated.
Thanks in advance!