3
I have a form, which can be inserted another group of "Name" and "Agency" just by clicking the button. I am using Angularjs and ng-Repeat to repeat the fields the moment I click on +. However, the list of Agency names "loses" the moment I enter a new contact.
How do I make this list "persist"?
** #select-tools refers to the Field "Search agency"
When I enter one more there is no element in the list
HTML
<div class="form-group">
<h4>Contatos</h4>
<div ng-repeat="contato in contatos" class="form-group">
<label class="control-label col-sm-2">Nome:</label>
<div class="col-sm-10">
<input type="text" class="form-control" ng-model="contato.nome">
</div>
<div class="form-group">
<h4>Agência</h4>
<div class="control-group">
<select ng-options="agencia.nome for agencia in listaAgencias" class="demo-default" placeholder="Selecionar a agência..." selectize>
</select>
</div>
</div>
</div>
<div align="right">
<button type="button" class="btn btn-xs btn-primary" ng-click="novoContato()">
<span class="glyphicon glyphicon-plus"></span>
</button>
<button type="button" class="btn btn-xs btn-danger" ng-click="excluirContato()"
ng-disabled="contatosVazio()">
<span class="glyphicon glyphicon-minus"></span>
</button>
</div>
</div>
Controller.js
oknok.controller('veiculoController', function ($scope, veiculosAPI, agenciasAPI) {
agenciasAPI.getAgencias().success(function (data) {
var embedded = data._embedded;
$scope.listaAgencias = embedded.agencias;
$('#select-tools').selectize({
maxItems: null,
valueField: 'nome',
labelField: 'nome',
searchField: 'nome',
options: embedded.agencias,
create: false
});
}).catch(function (error) {
alert("Erro ao obter listagem de agencias");
console.log(JSON.stringify(error));
});
$scope.contatos = [{
nome: "",
dados: []
}];
$scope.cancelar = function () {
window.location.href = "/"
};
$scope.novoContato = function () {
$scope.contatos.push({
nome: "",
email: ""
});
};
$scope.excluirContato = function () {
var ultimoItem = $scope.contatos.length - 1;
$scope.contatos.splice(ultimoItem);
};
$scope.contatosVazio = function () {
if (!($scope.contatos.length <= 1)) {
return false;
} else {
return true;
}
};
});
This select is responsible only for another field, the field that is problematic is independent of this code. The only line that initializes my field is:
<select ng-options="agencia.nome for agencia in listaAgencias" class="demo-default" placeholder="Selecionar a agência..." selectize>
– Daniela Morais
@Danielamarquesdemorais Ah, I understand - thanks for the clarification. I changed the answer to cover another possibility.
– OnoSendai