image slider with angularjs, ng-repeat and asynchronous requests

0

I am new at angular js, and I have had a problem when trying to create an image slider. The following happens to me: When I have an array "defined and initialized" by default, the effect of the slider works fine, but when I want to initialize it from the response of a request to an api, it stops working, here the html code:

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

Code js working:

  $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');
  
  });

Non-functional js code:

  $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');
  
  });

I hope you can support me with this doubt, since I searched for and tried solutions but none of them worked for me. Greetings!

    
asked by Alakai 03.03.2018 в 01:11
source

1 answer

0

Doubt, what the API answers has the same structure as what you have as mock data? ... And as a tip, try to refactor your code a bit, repeat the regular expression so many times it looks very bad, and it also tries to make the method more iterative than iterates images so that no matter how many images you can work on.

    
answered by 05.03.2018 в 04:13