Exploring Choices
In my quest to enhance user experience, I am working on creating a dynamic system involving two selection (drop-down) boxes. The idea is for the options in the second box to change based on the selection made in the first box.
For instance
If a user selects product 1 from the first box, the second box should display formats 1, 2, and 5. On the other hand, selecting product 2 should populate the second box with formats 2, 3, and 6.
Issue at Hand and Seeking Solutions
The first box successfully populates with data from my array. However, the second box fails to update based on the selection in the first box - in fact, it remains empty as seen in the screenshot below.
https://i.sstatic.net/8CuyH.png
HTML Structure
<div class="form-group">
<div ng-controller="dropDown">
<select ng-model="formData.ProductAndFormat" ng-options="product.name for product in productsandformats">
</select>
<select ng-model="formData.format" ng-if="user.productName"
ng-options="format.id as format.name for Format in user.productName.format">
</select>
</div>
</div>
JavaScript Controller Code
.controller('dropDown', function ($scope) {
$scope.productsandformats = [{
"name": "product 1",
"format": [{
"name": "format 1",
"id": "1"
}, {
"name": "format 2",
"id": "2"
}]
}, {
"name": "product 2",
"format": [{
"name": "format 3",
"id": "3"
},{
"name": "format 2",
"id": "2"
},
{
"name": "format 4",
"id": "4"
}, {
"name": "format 5",
"id": "5"
}]
}];
$scope.user = {productName: $scope.productsandformats[0], format: '1'};
$scope.displayModalValue = function () {
console.log($scope.user.productName);
}
})