3

Utilizei como referência para a resolução do problema: angular ng-repeat skip an item if it matches expression.

Seguinte, sabemos que no Bootstrap tem a classe active para marcar com uma cor diferente dos elementos que não estão ativos e estou utilizando isso junto com o AngularJS para quando o usuário abrir a página e carregar com AJAX determinadas informações em um menu no lado esquerdo da tela.

Utilizo a directiva ng-if para verificar se o item não é o primeiro da lista e colocar a classe active nele, porém não esta funcionando, esta marcando active em todos os itens da lista.

Quero que o Objeto 2, por exemplo, fique branco ao fundo e sem a classe active.

HTML:

<div class="col-md-3">
    <ul class="nav nav-pills nav-stacked" ng-init="inicializador()">
            <li ng-repeat="objeto in invoice.objetos" ng-if="objeto.posicao == 0" role="presentation" class="active">
                <a href="#">{{ objeto.atributo }}</a>
            </li>
            <li ng-repeat="objeto in invoice.objetos" ng-if="objeto.posicao != 0" role="presentation">
                <a href="#">{{ objeto.atributo }}</a>
            </li>
    </ul>
</div>

JavaScript:

$scope.inicializador = function() {

                    $http({
                        method : "GET",
                        url : '<c:url value="/cadastros/objeto/listObjetos" />'
                    }).then(function mySucces(response) {

                        var length = response.data.length;
                        var data = response.data;

                        for (var i = 0; i < length; i++) {
                            $scope.invoice.objetos.push({
                                posicao : i,
                                nome : data[i]
                            });
                        }

                    }, function myError(response) {
                        alert("Erro ao listar objetos");
                    });

                }

Resultado:

inserir a descrição da imagem aqui

1 Resposta 1

2

Arrumei de uma maneira simples, utilizando a directiva ng-class:

<ul class="nav nav-pills nav-stacked" ng-init="inicializadorObjeto()">
    <li ng-class="{'active':objeto.posicao == 0}" ng-repeat="objeto in invoice.objeto" role="presentation">
        <a href="#">{{ objeto.atributo }}</a>
    </li>
</ul>

Espero que na hora de selecionar outro objeto seja simples também, mas esse problema foi solucionado inicialmente.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .