Struggling with submitting my list of items from a select in AngularJS. This is my first time posting here and I'm still finding my way around.
The issue lies in using ng-repeat in my HTML to display all items. When the screen loads, it only shows: {{list.name}}. Clicking on this item correctly populates the list.
<select data-placeholder="Choose a Company/Branch" multiple chosen
style="width: 100%;"
ng-model="filtroRequisicao.codigoSistemaUsuariosFiliais"
required>
<option ng-repeat="list in lista" ng-value="list.id">
{{list.name}}
</option>
</select>
Angularjs:
$scope.lista = [{}];
//Loads Cooperatives' Branches
$scope.loadFiliais = function () {
var usuario = localStorage.getItem("usuarioAutenticado");
var objetoUsuario = {};
objetoUsuario = JSON.parse(usuario);
$http({
method: 'PUT',
url: '/getFiliais',
data: objetoUsuario
}).then(function (response) {
$scope.lista = response.data;
console.log($scope.lista);
},
function (response) {
console.log(response.data);
$scope.showNoty('No data found.', 'information');
});
};
$scope.loadFiliais();
I noticed that initializing my list with a PUT call in Angular caused issues.
$scope.lista =
[
{
'id': 1,
'name': 'American Black Bear',
},
{
'id': 2,
'name': 'Asiatic Black Bear',
},
{
'id': 3,
'name': 'Brown Bear',
},
{
'id': 4,
'name': 'Giant Panda',
},
//more items..
];
If I manually populate the values as shown above, everything works fine. However, when trying to load values from the angular PUT response, the select doesn't show any items.
It seems like the HTML is loading before the controller finishes its task in Angular.
I'm not sure if I'm looking at this the right way, but it feels like an issue that needs solving.
UPDATE
CSS
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
index.html:
<link rel="stylesheet" href="./vendor/angular/angular-csp.css"/>
form:
<div class="panel-body">
<p class="lt-label-required">Situation</p>
<select data-placeholder="Choose a Company/Branch" multiple class="chosen ng-cloak" chosen style="width: 100%;"
ng-model="filtroRequisicao.codigoSistemaUsuariosFiliais"
required>
<option ng-repeat="list in lista" value="{{list.id}}">
{{list.name}}
</option>
</select>
</div>
angular:
$scope.loadFiliais= function () {
$http({
method: 'PUT',
url: '/getFiliais'
}).then(function (response) {
$scope.lista = response.data;
console.log($scope.lista);
},
function (response) {
console.log(response.data);
$scope.showNoty('No data found.', 'information');
});
};
$scope.loadFiliais();
UPDATE SOLUTION
I managed to resolve my issue by using ng-if to dynamically render the element based on the length of $scope.lista.
https://docs.angularjs.org/api/ng/directive/ngIf
Angular:
$scope.lista = [];
Html:
<select data-placeholder="Escolha uma Empresa/Filial" multiple chosen
style="width: 100%;"
ng-if="lista.length > 0"
ng-model="filtroRequisicao.codigoSistemaUsuariosFiliais"
required>
<option ng-repeat="list in lista" ng-value="list.id">
{{list.name}}
</option>
</select>