How to fill a select with angular using materialize

Navigation
5

I'm trying to fill a select with data from my base The problem is that I have to always select select once for the data to load. How can I resolve 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 () {

    });
});
    
asked by anonymous 12.07.2016 / 23:57

3 answers

2

I actually found out where the problem was and by an oversight I did not realize that the watch attribute was missing after the material-select in the select tag. Doing so solves the problem of loading the 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 () {

    });

});
    
26.07.2016 / 04:18
0

Then the select friend of the angular material works in the same format as the normal one How angular material is a directve you have to use as an 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

link

    
14.07.2016 / 22:15
0

As you're using GET to get from a API need to mount it with jQuery, I've been working with Materialize and to dynamically do that it's bugged , that do "in the arm" in more than one project.

The html is simple: 

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

We do not already have controller to 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 people often just forget to initialize select with: 

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

So make sure your problem is not just this before you change the structure.

Not that it's relative to the question, but I recommend using .then and working with promises instead of .success and .error being deprecated for angularJS .

    
25.07.2016 / 05:11
What is the best practice for integrating external content with my site? Problem in the Jquery code