0

soy nueva en angular js,y me ha surgido un problema al intentar crear un slider de imagenes. Me sucede lo siguiente: Cuando tengo un array "definido e inicializado" por default, el efecto del slider trabaja bien, pero cuando quiero inicializarlo a partir de la respuesta de una petición a una api, deja de funcionar, aquí el código html:

<div class="col-sm-5" >
                        <div class="product-images" >
                            <ul class="dot"  ng-repeat="slide in slides2  track by slide.image">
                                <div class="image-imitation" >
                                    <CENTER>
                                    <img class="text-center" class="img-responsive" alt="" err-src="<?php echo $UrlrepositorioImagenes; ?>NO-DISPONIBLE.JPG" ng-src="{{slide.image}}" isImage  width="60%" />
                                    </CENTER>
                                </div>             
                            </ul>
                        </div>
                    </div> 

Código js funcionando:

  $scope.slides2 = [
    {image: $UrlrepositorioImagenes+Url.replace(/^\s+|\s+$/g, "")+'.JPG'},
    {image: $UrlrepositorioImagenes+Url.replace(/^\s+|\s+$/g, "")+'-PO-2.JPG'},
    {image: $UrlrepositorioImagenes+Url.replace(/^\s+|\s+$/g, "")+'-PO-3.JPG'},
    {image: $UrlrepositorioImagenes+Url.replace(/^\s+|\s+$/g, "")+'-PO-4.JPG'},
    {image: $UrlrepositorioImagenes+Url.replace(/^\s+|\s+$/g, "")+'-PO-5.JPG'},
    {image: $UrlrepositorioImagenes+Url.replace(/^\s+|\s+$/g, "")+'-PO-6.JPG'}
  ];
  
  $http({
    method: "POST",
    url: 'http://GetArticuloDet', // link UserLogin with HomeController
    data: Object.toparams(myobject),
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
  })
  .then(function (response){

    $scope.dataArray = response.data;
},function (error){
    console.log(error, 'no se puede consumir datos');
  
  });

introducir la descripción de la imagen aquí

Código js no funcional :

  $http({
    method: "POST",
    url: 'http://www.ecodeli.mx/ApiRest/APIPaginaWeb/v1/PaginaEcodeli/GetArticuloDet', // link UserLogin with HomeController
    data: Object.toparams(myobject),
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
  })
  .then(function (response){

    $scope.dataArray = response.data;
     $scope.slides2 = [
    {image: $UrlrepositorioImagenes+Url.replace(/^\s+|\s+$/g, "")+'.JPG'},
    {image: $UrlrepositorioImagenes+Url.replace(/^\s+|\s+$/g, "")+'-PO-2.JPG'},
    {image: $UrlrepositorioImagenes+Url.replace(/^\s+|\s+$/g, "")+'-PO-3.JPG'},
    {image: $UrlrepositorioImagenes+Url.replace(/^\s+|\s+$/g, "")+'-PO-4.JPG'},
    {image: $UrlrepositorioImagenes+Url.replace(/^\s+|\s+$/g, "")+'-PO-5.JPG'},
    {image: $UrlrepositorioImagenes+Url.replace(/^\s+|\s+$/g, "")+'-PO-6.JPG'}
  ];
   },function (error){
    console.log(error, 'no se puede consumir datos');
  
  });

Se muestran verticalmente

Espero puedan apoyarme con esta duda, ya que he buscado y probado soluciones pero ninguna me ha funcionado. Saludos!

1 respuesta 1

0

Duda, lo que te responde el API tiene la misma estructura que lo que tienes como mock data?... Y como tip, trata de refactorizar un poco tu còdigo, repetir tantas veces la expresiòn regular se ve muy mal, y tambièn trata de hacer màs gènerico el mètodo que itera las imagenes para que sin importar la cantidad de imagenes pueda trabajar.

1
  • Hola, gracias por responder. El api me devuelve un entero, que me indica la cantidad de imágenes disponibles para ese artículo. De hecho, mi objetivo es que en base a lo que me responde el api poder hacer dinámico el tamaño del array que voy a iterar, pero empecé con pruebas simples y noté ese problema.
    – Alakai
    Commented el 5 mar. 2018 a las 17:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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