1

Estoy tratando de crear un carousel de Bootstrap que carga múltiples imágenes mediante una api rest. Cuando lo pruebo estáticamente me da el resultado de la imagen:

introducir la descripción de la imagen aquí

pero cuando mando a llamar los datos desde Angular para consumir la api sale así:

introducir la descripción de la imagen aquí

este es el código del carousel:

<div class="carousel slide" data-ride="carousel" data-type="multi" data-interval="1000" id="hbo_mas">

    <div class="carousel-inner">

        <div class="item " ng-class="{active:!$index}" ng-repeat="data in datos">

            <div class="col-md-3">

                <a> <img src="{{ data.ruta }}{{ data.nombre }}.jpg"></a>

            </div>

        </div>

    </div>

</div>

y el script:

$(document).ready(function () {

    $('.carousel[data-type="multi"] .item').each(function () {

        var next = $(this).next();

        if (!next.length) {

            next = $(this).siblings(':first');

        }

        next.children(':first-child').clone().appendTo($(this));

        for (var i = 0; i < 2; i++) {

            next = next.next();

            if (!next.length) {

                next = $(this).siblings(':first');

            }

            next.children(':first-child').clone().appendTo($(this));

        }

    });

});

No sé dónde pueda estar el error. Gracias.

1

4 respuestas 4

1

Si sirve de referencia, este es mi código para la api:

angularRoutingApp.controller("ruta_hbo_max", function ($scope, $http, dataResource) {

    $http.get("http://192.168.100.15/api/hbo_max").success(function (data) {

        $scope.datos = data;

    });

    $scope.datosResource = dataResource.get();

});

angularRoutingApp.factory("dataResource", function ($resource) {

    return $resource("http://192.168.100.15/api/hbo_max", //la url donde queremos consumir
           {},
           { get: { method: "GET", isArray: true }
    });

});
1
  • ¿Podrías porfavor explicar al OP lo que hace tu código? Así en un futuro, personas con el mismo problema sepan que hacer al entender tu código!
    – NaCl
    el 25 jul. 2016 a las 20:49
0

Saludos. Pude resolverlo dejando mi script de jQuery de la siguiente manera. Pero ahora mi problema es que funciona en Firefox y en Explorer pero en Chrome me los sigue mostrando de uno en uno. ¿Qué podría ser? De antemano, gracias por su atención.

$(document).ready(function () {

    $(".item").each(function () {

        var next = $(this).next();

        if (!next.length) {

            next = $(this).siblings(":first");

        }

        next.children(":first-child").clone().appendTo($(this));

        for (var i = 0; i < 2; i++) {

            next = next.next();

            if (!next.length) {

                next = $(this).siblings(":first");

            }

            next.children(":first-child").clone().appendTo($(this));

        }

    });

});
0

Estoy de acuerdo con la respuesta de César Gómez, pero como no sabemos cómo es el objeto data no es seguro que $index funcione. Intenta hacer el track by data.nombre si estás seguro que que es imposible que se repita.

<div class="carousel slide" data-ride="carousel" data-type="multi" data-interval="1000" id="hbo_mas">

    <div class="carousel-inner">

        <div class="item " ng-class="{active:!$index}" ng-repeat="data in datos track by data.nombre">

            <div class="col-md-3">

                <a> <img src="{{ data.ruta }}{{ data.nombre }}.jpg"></a>

            </div>

        </div>

    </div>

</div>
-1

Recuerda que cuando haces un ng-repeat, debes diferenciar cada elemento cargado para que AngularJS sepa que es distinto. Puedes colocar un track by $index para que puedan cargar correctamente todas las imágenes.

<div class="carousel slide" data-ride="carousel" data-type="multi" data-interval="1000" id="hbo_mas">

    <div class="carousel-inner">

        <div class="item " ng-class="{active:!$index}" ng-repeat="data in datos track by $index">

            <div class="col-md-3">

                <a><img src="{{ data.ruta }}{{ data.nombre }}.jpg"></a>

            </div>

        </div>

    </div>

</div>
1
  • probe agregandole la linea pero sigo opteniendo el mismo resultado el 22 jul. 2016 a las 23:04

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.