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>