Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Usando ng-show baseando-se em um valor booleano

Bom dia! Tenho uma pequena dúvida referente ao Angular, gostaria de uma pequena ajuda se possível.

Tenho o seguinte controller:

angular.module('hotsite').controller('BannerController', function($scope, $http) {


    $scope.banner = [];
    $scope.bannerativo = [];

    $http.get('/Admin/rest/getBanner')
    .then(function onSuccess(response) {
        var data = response.data;
        $scope.banner = data;
    //    console.log(data);
        var a = $scope.banner.BannerAtivo;
        function checkBanner(a) {
            if ($scope.banner.BannerAtivo == true){
                var b = $scope.banner;
                console.log(b);
            };
        };
        checkBanner();

    })
    .catch(function onError(response) {
        var data = response.data;
        console.log(data);
    });
});

Que irá retornar um JSON da seguinte maneira:

[
    {
        "BannerID": 0,
        "BannerImage": "http://hotsite/Admin/PublicTempStorage/multimedia/Prancheta%201_6c99a129f82042a7b84f091395db8edb.png",
        "BannerMin": "http://hotsite/Admin/PublicTempStorage/multimedia/educacaoicone_0490e29055144e18b3985b45c8ad5a28.png",
        "BannerTitulo": "Xurupita Style",
        "BannerDesc": "Lorem Ipsum Dolor Siamet",
        "BannerAtivo": false,
        "SetorId": 1
    },
    {
        "BannerID": 2,
        "BannerImage": "http://hotsite/Admin/PublicTempStorage/multimedia/536_82c7f267c6d24bc587c1de51c3d10d0a.jpg",
        "BannerMin": "http://hotsite/Admin/PublicTempStorage/multimedia/horizontal-filtering-sorting-design-06-all-posters-3c61a700a607814bb6bb339a3381fbcd_62c0e1be251b49188d03b13590c7fdf7.jpg",
        "BannerTitulo": "Chihuahua",
        "BannerDesc": "Role",
        "BannerAtivo": true,
        "SetorId": 1
    }
]

Estou tentando utilizar a seguinte marcação no HTML:

    <div class="panel panel-default" >
                <div class="col-md-6" ng-repeat="setor in setores" ng-show="{{banner.bannerAtivo}}">
                    <div class="panel-heading">
                        <h3 class="panel-title text-center">{{setor.SetorNome}}</h3>

                    </div>
                    <div class="panel-body">
                        <img class="img-responsive center-block" src="{{setor.SetorLogo}}">
                    </div>
                    <!-- fim panel-body -->
                </div>

        </div>

Porém, não estou conseguindo filtrar os valores baseados no ng-show. Assim, tenho 2 perguntas:

1 - Como eu faço para gravar uma variável apenas se certo valor da array for true? Tentei com a função no controller mas não obtive um resultado satisfatório, creio que meu JS ainda não é bom o suficiente xD

2 - Onde estou errando nesse ng-show? Gostaria de repetir apenas os banners que estiverem recebendo o banner.bannerAtivo = true

Obrigado!

4 respostas

Não entendi o que você deseja olhando seu código, mas tenho algumas considerações que podem lançar uma luz sobre seu problema:

<div class="col-md-6" ng-repeat="setor in setores" ng-show="{{banner.bannerAtivo}}">

Você esta iterando em setores, mas onde esta setores em seu controller? Outro ponto, sua banner é um array (isso porque você mostrou a estrutura de dados) e sabemos que em JavaScript para acessar um array precisamos indicar sua posição. Aliás, variáveis que representam um array ficam no plural, para não confundir quem lê o seu código.

Você esta acessando show="{{banner.bannerAtivo}}">. O array banner não tem a propriedade bannerAtivo, quem tem é o item dentro de um array.

Você chegou a terminar o curso de Angular da Alura? Fez o exercícios dos pré-requisitos para saber se tem algum ponto para ficar melhor do que já é? Digo isso por você ter confundido estrutura de dados, no caso, do array em JavaScript que aprendemos no curso de lógica de programação.

Bom, dentro do que você me passou, são essas minhas observações. Dá uma conferida nelas e dentro do contexto da sua aplicação faça o acerto, porque não ficou claro para mim o que você deseja.

Você quer filtrar a lista de banners que vieram do servidor e considerar apenas os ativos? É isso?

Você pode aplicar um filter simples do JavaScript no seu array como no exemplo abaixo:

Faça um teste no seu console.

var bannersQueVieramDoServidor = [
    {
        "BannerID": 0,
        "BannerImage": "http://hotsite/Admin/PublicTempStorage/multimedia/Prancheta%201_6c99a129f82042a7b84f091395db8edb.png",
        "BannerMin": "http://hotsite/Admin/PublicTempStorage/multimedia/educacaoicone_0490e29055144e18b3985b45c8ad5a28.png",
        "BannerTitulo": "Xurupita Style",
        "BannerDesc": "Lorem Ipsum Dolor Siamet",
        "BannerAtivo": false,
        "SetorId": 1
    },
    {
        "BannerID": 2,
        "BannerImage": "http://hotsite/Admin/PublicTempStorage/multimedia/536_82c7f267c6d24bc587c1de51c3d10d0a.jpg",
        "BannerMin": "http://hotsite/Admin/PublicTempStorage/multimedia/horizontal-filtering-sorting-design-06-all-posters-3c61a700a607814bb6bb339a3381fbcd_62c0e1be251b49188d03b13590c7fdf7.jpg",
        "BannerTitulo": "Chihuahua",
        "BannerDesc": "Role",
        "BannerAtivo": true,
        "SetorId": 1
    }
];

var banners = bannersQueVieramDoServidor.filter(function(banner) { 
    return banner.BannerAtivo;
});
console.log(banners); // aqui você só terá banners que tiverem true na propriedade BannerAtivo.
solução!

Olá Flavio! Vou tentar usar sua solução, mas eu consegui resolver de outra maneira:

  $http.get('/Admin/rest/getBanner')
    .then(function onSuccess(response) {
        var data = response.data;
        $scope.banners = data;
        var returnTrueData = function () {
              var result = [];
              for (var i = 0; i < data.length; i++) {
                   for (key in data[i]) { 
                        if(data[i].hasOwnProperty(key)) {
                        if(key === "BannerAtivo" && data[i][key] === true) { 
                            result.push(data[i]);
                       }
                     }
                  }
               }
               console.dir(result);
               return result;
            }
      returnTrueData();
      console.log($scope.banners);


    })

Boa notícia! Mas tipo, veja se o filter te ajuda, pois simplificará bastante seu código.