Item class in list always initializes active

Question

Item class in list always initializes active

Navigation

#1 by (2 votes)

3

I used it as a reference for troubleshooting the problem: angled ng-repeat skip an item if it matches expression .

Next, we know that Bootstrap has the class active to mark with a different color from the elements that are not active and I'm using it together with AngularJS for when the user opens the page and loads with AJAX certain information in one menu on the left side of the screen.

I use the ng-if directive to check if the item is not the first in the list and put the active class on it, but it is not working, it is checking active on all items in the list.

I want the Objeto 2 , for example, to be white in the background and not the active class.

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");
                    });

                }

Result:

html angularjs ajax twitter-bootstrap

asked by anonymous 28.01.2016 / 13:06

1 answer

Java String byte array with negative numbers Show thumbnails of files [closed]

score 2 · Answer 1

I built it in a simple way using the ng-class directive:

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

I hope that when it comes to selecting another object it's simple too, but this problem was solved initially.