How to fill a select with angular using materialize

Question

I’m trying to fill in a select with data from my groundwork the problem is that I always have to select the select one time for the data to load. How can I solve this problem?

HTML

 <form class="" name="formulario">
        <div class="row">
            <div class="input-field col s6 m6 l6">
                <i class="material-icons prefix">store</i>
                <select  material-select></select>
                <label for="selectCliente">Cliente</label>
            </div>

            <div class="input-field col s6 m6 l6">
                <i class="material-icons prefix">store</i>
                <select ng-model="pedido.Hora" material-select></select>
                <label for="inputHora">Hora</label>
            </div>
        </div>
        <div class="row">
            <div class="input-field col s6 m6 l6">
                <i class="material-icons prefix">store</i>
                <select ng-model="pedido.ProdutoId"
                        ng-options="prod.Id as prod.NomeProduto for prod in ListaProdutos" material-select>
                </select>
                <label for="inputProduto">Produto</label>
            </div>

            <div class="input-field col s2 m2 l2">
                <i class="material-icons prefix">store</i>
                <input id="inputQtd" type="number" class="validate" name="Qtd" ng-model="pedido.Qtd" min="0" max="">
                <label for="inputQtd">Qua</label>
            </div>
            <div class="input-field col s2 m2 l2">
                <a class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">add</i></a>
            </div>
        </div>
 </form>

Controller

angular.module("modaFeminina").controller("PedidoController", function ($scope, $http, $base64) {

    $scope.pedido = {}
    $scope.ListaProdutos = [];
    $scope.ListaCliente = [];

    $http.get("/Produto/Listar").success(function (produtos) {
        $scope.ListaProdutos = produtos;
    }).error(function () {

    });
});

Answer 1

In fact I found out where the problem was and by an oversight I did not realize that the attribute was missing watch after the material-select in the select tag. Doing this solves the problem of loading select only when you select the empty combo.

HTML

   <form class="" name="formulario">
        <div class="row">
            <div class="input-field col s6 m6 l6">
                <i class="material-icons prefix">account_circle</i>
                <select
                        ng-controller="ListaClientes"
                        ng-model="pedido.ClienteId"
                        ng-options="value.Id as value.Nome for value in ListaCliente" material-select watch>
                    <option value="">Selecione um cliente</option>
                </select>
                <label for="selectCliente">Cliente</label>
            </div>
        </div>
    </form>

Controller

angular.module("modaFeminina").controller("ListaClientes", function ($scope, $http) {

    $scope.ListaCliente = [];

    $http.get("/Cliente/Listar").success(function (clientes) {
        $scope.ListaCliente = clientes.ListaClientes;
    })
    .error(function () {

    });

});

Answer 2

How are you using GET to take from an API accurate mount it with jQuery, I have worked with Materialize and to make it dynamically it is bugle, I’ve had to do "arm" on more than one project.

The html is simple:

<div class="input-field col s12">
  <select name="select_produto" id="select_produto">
  </select>
</div>

We don’t have controller that mount the select using jQuery:

 $http({
    method: 'GET',
    url: URL
  }).then(function successCallback(response) {
    produto = response.data;
    var produtoSelect = $('select#select_produto');

    produtoSelect.html('<option value="-1" disabled selected>Select the product</option>');


    for (var i = 0; i < produto.length; i++) {
      var tempItem = $('<option data-icon='+produto[i].img+' class="circle" value="'+produto[i].id+'">'+produto[i].name+' </option>');
      produtoSelect.append(tempItem);
    }

    $('select#select_produto').material_select();        

  }, function errorCallback(response) {
    alert("Error for get objects!");
  });

Remembering that often people simply forget to initialize the select with:

 $(document).ready(function() {
    $('select').material_select();
  });

So make sure your problem isn’t just that before you change the structure.

---

Not that it’s relative to the question, but I recommend using .then and work with promises instead of .success and .error which is being discontinued for the angularJS.

Answer 3

So friend the select of the angular material works in the same format as normal As angular material is a directve you have to use as element and not as attributes in your html tag

<md-input-container>
  <md-select ng-model="someModel" placeholder="Select a state">
    <md-option ng-value="opt" ng-repeat="opt in neighborhoods2">{{ opt }}</md-option>
  </md-select>
</md-input-container>

link for more information

https://material.angularjs.org/latest/api/directive/mdSelect