Angularjs - ng-show directive is not working in java application

1

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: '/'});
}
    
asked by anonymous 14.03.2015 / 20:38

1 answer

1

First, did you ever put ng-controller into view ?

Try to use ng-if instead of ng-show .

Here is an example for a better understanding:

function MainController($scope) {
  $scope.mostra = false;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script><bodyng-appng-controller="MainController">
  <div ng-if="mostra">
    <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>   
  </div>
</body>
    
16.03.2015 / 21:37