Hi, I’m triying access to data array filled with sqlite table content. I have a modal view when I create new record but i can’t load data input select:
Array is filled given that it prints in log when the controller init.
This is my code:
Parent call view:
<ion-view view-title="Gestion de animales">
<ion-content ng-controller="AnimalsCtrl" data-ng-init="init()">
<div class="row header">
<div class="col col-10">Codigo</div>
<div class="col col-20">Nombre</div>
<div class="col col-30">Apellidos</div>
<div class="col col-40">Email</div>
</div>
<ion-list >
<ion-item ng-repeat="animal in animals" item="animal" href="#/tab/animals/{{animal.CODIGO}}">
<div class="row">
<div class="col col-10">{{animal.CODIGO}} </div>
<div class="col col-20">{{animal.NOMBRE}} </div>
<div class="col col-30" >{{animal.APELLIDOS}} </div>
<div class="col col-40">{{animal.EMAIL}} </div>
<ion-option-button class="button-assertive" ng-click="eliminar(animal)">Eliminar</ion-option-button>
</div>
</ion-item>
</ion-list>
</ion-content>
<ion-footer-bar align-title="left" class="bar-assertive">
<div class="buttons">
<button class="button">Left Button</button>
</div>
<h1 class="title"></h1>
<div class="buttons" ng-click="openModal()">
<button class="button">Nuevo animal</button>
</div>
</ion-footer-bar>
</ion-view>
Modal view
<script id="modal.html" type="text/ng-template">
<div class="modal">
<ion-header-bar class="bar-stable">
<button class="button" ng-click="closeModal()">Atras</button>
<h1 class="title">Nuevo Animal</h1>
</ion-header-bar>
<form ng-submit="anadirAnimal(datos)">
<ion-content>
<ion-list class="list-inset">
<ion-item class="item-input">
<span class="input-label">Codigo</span>
<input type="text" ng-model="datos.codigo">
</ion-item>
<ion-item class="item-input item-select">
<span class="input-label">Especie</span>
<select ng-options="item.CODIGO as item.DESCRIPCION for item in especies track by item.CODIGO" ng-model="datos.especie"></select>
</ion-item>
<ion-item class="item-input">
<span class="input-label">Cepa</span>
<input type="text" ng-model="datos.cepa">
</ion-item>
<ion-item class="item-input item-select">
<span class="input-label">Transgenico</span>
<select ng-model="datos.transgenico">
<option selected>Si</option>
<option>No</option>
</select>
</ion-item>
<ion-item class="item-input item-select">
<span class="input-label">Sexo</span>
<select ng-model="datos.sexo">
<option selected>Macho</option>
<option>Hembra</option>
</select>
</ion-item>
<ion-item class="item-input">
<span class="input-label">Fecha Nacimiento</span>
<input type="date" placeholder="fechaNac" ng-model="datos.fechanac">
</ion-item>
<ion-item class="item-input">
<span class="input-label">Fecha Cirugia</span>
<input type="date" placeholder="fechaCir" ng-model="datos.fechacir">
</ion-item>
</ion-list>
</ion-content>
<ion-footer-bar align-title="left">
<button class="button button-bar button-stable" type="submit">Aceptar</button>
</ion-footer-bar>
</form>
</div>
</script>
Array filled in controller init function
angular
.module('proyecto')
.controller('AnimalsCtrl', AnimalsCtrl);
function AnimalsCtrl($scope, $cordovaSQLite, $ionicPopup, $ionicModal, Animales) {
$scope.animals = [];
$scope.investigadores = [];
$scope.especies = [];
$scope.datos = {
codigo: 'sasa',
especie: ''
}
//$scope.animals = Animales.all();
//$scope.remove = remove;
$scope.shouldShowDelete = false;
$scope.shouldShowReorder = false;
$scope.listCanSwipe = true
// RELLENAMOS ARRAY DE ESPECIES
var query = "SELECT CODIGO, DESCRIPCION FROM ESPECIE";
$cordovaSQLite.execute(db, query, []).then(function (res) {
if (res.rows.length > 0) {
for (var i = 0; i < res.rows.length; i++) {
$scope.especies.push({
CODIGO: res.rows.item(i).CODIGO, DESCRIPCION: res.rows.item(i).DESCRIPCION
});
console.log(res.rows.item(i).DESCRIPCION);
}
}
}, function (err) {
console.error(err);
});
};
and these are my modal functions:
$ionicModal.fromTemplateUrl('modal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function (modal) {
$scope.modal = modal
})
$scope.openModal = function () {
$scope.modal.show()
}
$scope.closeModal = function () {
$scope.modal.hide();
};
$scope.$on('$destroy', function () {
$scope.modal.remove();
});