I'm trying to use the ng-show
of AngularJS directive in a Spring MVC application, but I'm not getting it, it's simply not working. Note: I'm using AngularJS normally, the other directives, but ng-show
and ng-hide
do not work, even though I take the example of the AngularJS website does not work. Here's what I'm doing right below:
On my .jsp page I do this:
<div ng-show="mostra">
<span>conteúdo para mostra ou esconder</span>
</div>
In my controller I set the value of mostra
as follows:
$scope.mostra = false;
In this way the AngularJS documentation was not meant to show the content within div
. I already imported the files from AngularJS, including, as I said earlier, I'm using the Framework to control my pages, to display content in my tables, and so on. So I do not know why this directive is not working. Can someone help me? I use these directives in Sublime Text and everything works normally, in this project I'm using Eclipse.
Here is the code for the page:
<div align="center">
<form action="{{action}}" id="formCaixaDizimo"
target="_blank">
<fieldset>
<legend>{{legenda}}</legend>
<table>
<tr>
<td colspan="10" style="background: aqua;">Selecione o nome da Igreja</td>
</tr>
<tr>
<td colspan="3">
<label for="igreja">Igreja: </label>
<select ng-change="selectTodasIgrejas()" ng-model="igreja" ng-options="igreja.igreja.nome for igreja in todasIgrejas">
<option value="">..Selecione...</option>
</select>
</td>
</tr>
<div ng-show="mostra">
<tr>
<td colspan="10" style="background: aqua;">Selecione o nome do
Membro</td>
</tr>
<tr>
<td>
<label for="membro">Membro: </label>
<select required="true" ng-change="selectMembroPorIgreja()" ng-model="membro" ng-options="membro.membro.nome for membro in membroPorIgreja">
<option value="">..Selecione...</option>
</select>
</td>
</tr>
</div>
</table>
</fieldset>
<button type="submit" class="btn btn-primary" ng-disabled="habilita">Pesquisar</button>
<button type="reset"class="btn btn-inverse">Limpar</button>
</form>
Follow the controller code:
app.controller('geraCartaoMembro', function($scope, $http, MembroService, $log, $location) {
$scope.habilita = true;
$scope.mostra = false;
$http.get('ListaTodasIgrejas').success(function(data) {
$scope.todasIgrejas = data;
});
var idigreja = null;
var idmembro = null;
function listaMembro(idigreja) {
$scope.membroPorIgreja = MembroService.listaMembroParaGerarCartao({url: 'ListaMembroGeraCartao', idigreja: idigreja}, function() {
}, function(error) {
$scope.erroMembro = "Houver um problema na requisição do serviço. Tente mais tarde ou entre em contato com o administrador da aplicação";
});
};
if($location.url() == '/pesquisaCartaoMembroPorNome') {
$log.log($scope.mostra);
$scope.legenda = "Gerar cartão de membro de acordo com o nome da igreja e do membro";
$scope.selectTodasIgrejas = function() {
$scope.habilita = true;
idigreja = $scope.igreja.igreja.idigreja;
$log.log("idigreja: " + idigreja);
listaMembro(idigreja);
};
$scope.selectMembroPorIgreja = function() {
idmembro = $scope.membro.membro.idmembro;
$scope.action = "cartaoMembroPorNome/" + idigreja + "/" + idmembro;
$scope.habilita = false;
};
} else if ($location.url() == '/pesquisaCartaoMembro') {
$log.log($scope.mostra);
$scope.legenda = "Gerar cartão de membro de acordo com a igreja - gera de todos os membros da igreja selecionada";
$scope.selectTodasIgrejas = function() {
$scope.habilita = false;
idigreja = $scope.igreja.igreja.idigreja;
$scope.action = "cartaoMembro/" + idigreja;
};
}
});
In the% wizard, I determine the controller of the page, here's how I do it:
app.config(function($routeProvider) {
$routeProvider.when('/pesquisaCartaoMembroPorNome',{
templateUrl: '/igreja/views/dizimo/RelatorioDizimo.jsp',
controller: 'geraCartaoMembro'
});
$routeProvider.when('/pesquisaCartaoMembro',{
templateUrl: '/igreja/views/dizimo/RelatorioDizimo.jsp',
controller: 'geraCartaoMembro'
});
$routeProvider.otherwise({redirectTo: '/'});
}