Tenho dois select, e quero que o segundo só mostre os dados dependendo da seleção do primeiro. O que me falta é 'popular' o segundo select, pois já tenho os dados necessários pra colocar nele. Como estou começando com JS não sei como fazer isso dinamicamente e não sei se é a melhor maneira de se fazer também.
HTML
<select id="selectCategory"
ng-model="selectedCategory"
ng-options="category as category.title for category in categories">
<option value="">Escolha...</option>
</select>
<select id="selectProduct"
ng-model="selectedProduct"
ng-options="product as product.name for product in products">
<option value="">Escolha...</option>
</select>
O primeiro select está funcionando certo, quando eu seleciono um item, chama o listener 'change' e busca o arquivo json necessário no servidor com o getData()
JS
var selectCategory = document.getElementById("selectCategory");
var selectProduct = document.getElementById("selectProduct");
// Aqui popula o primeiro select
DataService.getProducts().then(function (result) {
console.log(result);
$scope.categories = result.data.products;
}, function (err) {
console.error(err);
});
function getData (data){
DataService.getProduct(data).then(function (result) {
$scope.products = result;
console.log($scope.products); // <- aqui mostra o json correto
}, function (err) {
console.error(err);
});
}
// evento chamado quando escolhido uma opção no primeiro select
selectCategory.addEventListener('change', function (){
var i = selectCategory.selectedIndex -1;
getData($scope.categories[i].name);
});
Exemplo json que é carregado
{
"product": [
{
"name": "Prod 1",
"image": "www.google.com"
},
{
"name": "Prod 2",
"image": "www.google.com"
}
]
}
O que eu não tenho ideia de como fazer é como colocar os dados no segundo select após pegar os dados do servidor