0

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

1 Resposta 1

1

Faz o seguinte:

Dentro do seu getProduct especifique o índice correto no json:

$scope.products = result.product;

E veja se vai retornar o resultado que você espera.

Fiz uma simulação aqui embaixo para você ver funcionando:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  var result = {
    "product": [
      {
        "name": "Prod 1",
        "image": "www.google.com"
      },
      {
        "name": "Prod 2",
        "image": "www.google.com"
      }
    ]
  };
  
  $scope.products = result.product;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
  <select id="selectProduct"
          ng-model="selectedProduct"
          ng-options="product as product.name for product in products">
      <option value="">Escolha...</option>
  </select>
</div>

OBS.: O valor do option não está sendo especificado, somente o label. Leia mais sobre o ngOption aqui.

1
  • 1
    Funcionou direitinho, um descuido meu de não ter feito isso. Obrigado!
    – O_Vagner
    7/03/2017 às 16:56

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .