2017-07-06 4 views
-1

Ich muss Bildalben anzeigen. Bis @media Element Ich kann 3 Bilder pro Folie anzeigen, unter @media width :700px Ich muss 1 Bild pro Folie anzeigen.Aufruf einer anderen Funktion, wenn die Fenstergröße geändert wird

Für die Anzeige 3 Bild pro Folie, geschrieben ich eine Funktion showfilteredImages();

$scope.imagemaindiv 

werden alle Bilder haben von Back-End-

$scope.imagemaindiv = [{ 
    'img': "image1.png", 
    "id": 1 
}, { 
    'img': "image2.png", 
    "id": 2 
}, { 
    'img': "image3.png", 
    "id": 3 
}, { 
    'img': "image4.png", 
    "id": 4 
}, { 
    'img': "image5.png", 
    "id": 5 
}, { 
    'img': "image6.png", 
    "id": 6 
}] 
$scope._firstImgIndex = 0; 
$scope._lastImgIndex = 2; 
$scope.showFilteredImages = function() { 
    $scope.filteredImages = []; 
    for (var i = $scope._firstImgIndex; i <= $scope._lastImgIndex; i++) { 
     $scope.filteredImages.push($scope.imagemaindiv[i]); 
    } 
}; 
+0

Sie Bootstrap verwenden können, diese Sache tun und tun Sie es bu JS tun müssen –

Antwort

1

Code Nach könnte dies für you.:).Try arbeiten.

var data=angular.element($window); 
data.bind('resize',function(){ 

//call your another function here: 

}); 
0

versuchen diesen Code

<!DOCTYPE html> 
<html ng-app="app"> 

    <head> 
    <meta charset="utf-8" /> 

    <script>document.write('<base href="' + document.location + '" />');</script> 
    <link rel="stylesheet" href="style.css" /> 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script> 
    <script src="app.js"></script> 
    </head> 

    <body> 
    <my-directive></my-directive> 
    </body> 

</html> 

app.js

'use strict'; 

var app = angular.module('app', []); 

app.directive('myDirective', ['$window', function ($window) { 

    return { 
     link: link, 
     restrict: 'E', 
     template: '<div>window size: {{width}}px</div>' 
    }; 

    function link(scope, element, attrs){ 

     scope.width = $window.innerWidth; 

     angular.element($window).bind('resize', function(){ 
     alert(); 
     scope.width = $window.innerWidth; 

     // manuall $digest required as resize event 
     // is outside of angular 
     scope.$digest(); 
     }); 

    } 

}]); 
+0

nur diese zeigen Warnung, wenn Sie die Größe des Fensters ändern –

Verwandte Themen