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

Question

Guys I’m trying to use the directive ng-show Angularjs in a Spring MVC application, but I’m not getting it, it’s just not working. Note: I am using Angularjs normally, the other directives, but ng-show and ng-hide do not work, even if I take the example of the site of Angularjs does not work. Follows what I am doing just below:

On my page .jsp i do it:

<div ng-show="mostra">
  <span>conteúdo para mostra ou esconder</span>
</div>

In my controller i define the value of mostra as follows:

$scope.mostra = false;

So by the documentation of Angularjs was not to show the content within the div. I have already imported the files from Angularjs, including, as I said earlier, I am using the Framework to control my pages, to display content on my tables and so on. So I don’t know why this directive isn’t working. Can someone help me? I use these directives in Sublime Text and everything works normally, in this project I am using Eclipse.

Follow below the page code:

<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>

Follows the code of controller:

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 $routeProvider is that I determine the controller page, follows how I do:

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: '/'});
}

Answer 1

First, you got to put the ng-controller in view?

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

Follow, an example for better understanding:

function MainController($scope) {
  $scope.mostra = false;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>

<body ng-app ng-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>