0

En mi proyecto tengo una especie de carrusel donde muestro varias imágenes a la vez, y por arriba de este un select. La cosa es la siguiente, implemento un filtro mediante el select, es decir, al hacer el cambio en las diferentes opciones del select que se me muestren unas imágenes u otras, hasta aquí bien, el problema es que el carrusel cuando filtro por alguna de las opciones del select donde la imagen no este en la primera pagina, esta primera pagina se me sigue mostrando pero vacía. ¿Como hago para ocultar las paginas donde no se visualicen las imágenes del filtro?

Este es el código que utilizo para mostrar las imágenes en el carrusel:

function cargaPrincipal(){  

    $scope.imgCargadas=$scope.pagina*$scope.nFotos;
    $scope.numeroFotosCargadas=0;
    $scope.arrayFotos=[];

    for(i=$scope.imgCargadas;i<$scope.empresas.length;i++){

         $scope.arrayFotos[$scope.numeroFotosCargadas]=$scope.empresas[i];  
         $scope.numeroFotosCargadas++;
         if ($scope.numeroFotosCargadas==12) {
             break;
         }
    } 
}

$scope.cambiarPagina=function(pag){ 

    $scope.paginacion=$scope.empresas.length/$scope.nFotos;
    $scope.numeroPag=Math.ceil($scope.paginacion);

    if(pag){
        if($scope.pagina==($scope.numeroPag-1)){
            $scope.pagina=0;
        } else {
            $scope.pagina++;
        }
    } else {
        if($scope.pagina==0){
            $scope.pagina=$scope.numeroPag-1;
        } else {
            $scope.pagina--;
        }
    }   
    cargaPrincipal();
}

Este es el ng-change:

$scope.filtro = function(imagenId) {
  console.log(imagenId);
  $scope.imgId=imagenId;
}

Código html:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js"></script>

<select class="w-100 cssDropSelect"  ng-model="suminId" ng-change="filtro(suminId)">
    <option value="-1" selected>---Selecciona una Cadena de Suministros---</option>
    <option value="">Todas</option>
    <option ng-repeat="suministro in datosSuministro" ng-value="suministro.id" >{{suministro.description}}</option>
</select>


<div id="carouselNoMovil" class="CarouselSlide carousel slide " data-ride="carousel" data-interval="false" ng-swipe-right="cambiarPagina(false)" ng-swipe-left="cambiarPagina(true)">
    <div id="CarouselImg" class="carousel-item carouselHeight text-center BackgroundDiv">
        <div class="d-flex h-100 w-100 align-items-center justify-content-center " >
           <div ng-repeat="imatge in arrayFotos | filter:{'bnId':imgId} | filter:{'provId':imgIdP}" class="col-1 h-100 DivImg" ng-class="{'active':isActive($index)}">
                <img class="ImgCarousel img-fluid col-1 cursor" ng-src="{{imatge.imageName!=''?imatge.imageName:'img/noimage.png'}}" alt="Empresa {{$index}}"   ng-click="showPhoto($index);" >         
            </div>
        </div>
    </div>
</div>

1
  • Porque no le asignas una categoria a tus fotos y de esta forma cuando filtras por el select, lo haces por esa categoria? el 14 mar. 2019 a las 14:53

1 respuesta 1

0

Sino con un ng-if/ng-show donde el id del suministro en la imagen sea diferente al que seleccionaste en el select.

Tu Respuesta

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

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