I am in the process of developing a small Angular (1.5) application that includes two linked drop-down menus. The options in the second drop-down menu are dynamically updated based on the selection made in the first drop-down menu. Everything functions as expected, but I have encountered a minor issue. In the HTML file, the value attribute within the option tag is assigned to object:[some number] instead of displaying the actual option value. The displayed value between the <option> and </option> tags appears correctly. Please refer to the screenshot below for clarification. How can I ensure that the value attribute (value="") matches the value displayed between the opening and closing tags?
https://i.sstatic.net/1Vgj7.png
HTML File:
<div ng-app="App" ng-controller="app-controller">
<select id="brand"
ng-model="input.selected_brand"
ng-options="a for (a,b) in data"
>
<option value="" disabled selected>Selection 1</option>
</select>
<select id="model"
ng-model="input.selected_model"
ng-options="a.model for a in input.selected_brand"
>
<option value="" disabled selected>Selection 2</option>
</select>
</div>
JS file:
var App = angular.module("App", [])
.controller('app-controller',function($scope,$http){
// Fetch JSON data
$http.get('data/data.json').then(function(res){
$scope.data = res.data;
$scope.selected_brand = $scope.data;
});
});
JSON file:
{
// JSON data content here
}
The purpose behind this setup is to enable
$scope.submit = function(input){
$scope.input_data = angular.copy(input);
console.log($scope.input_data);
}
This function requires accurate values to perform correctly. Currently, the output from console.log appears as follows:
Object { selected_brand: Array[10], selected_model: Object }