How to fill a select with angular using materialize
I'm trying to populate a select with data from my base the problem is that I have to always select the select once 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 () {
});
});
3 answers
Actually I found out where the problem was and by an oversight I ended up not realizing that the attribute watch was missing after the material-select in the Select tag. Doing so 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 () {
});
});
So friend the select of 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
As you are using GET to get from an API needassemble it with jQuery, I have been working with Materialize and to do this dynamically it is bugged, I have already had to do "on the arm" in more than one project.
Html is simple:
<div class="input-field col s12">
<select name="select_produto" id="select_produto">
</select>
</div>
We don't already have controller to mount 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 select with:
$(document).ready(function() {
$('select').material_select();
});
Then make sure that your problem is not just that before changing the structure.
Not that it's question-related, but I recommend using .then and working with promises instead of .success and .error being discontinued for angularJS.