var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope,$rootScope,$filter,$timeout) {
//$scope.items2 = [1,2,3,4,5,6,7,8,9,10];
$scope.carouselData =[
{"category":"samsung","src":"http://compareindia.ibnlive.com/media/gallery/images/2012/jul/beam_1_031058257405.jpg"},
{"category":"samsung","src":"http://www.india777.com/company_prof/11-07-2012-05-32-58-samsung-mobile-GT-S6802.jpg"},
{"category":"apple","src":"http://androidos.in/wp-content/uploads/2011/12/Galaxy-S-II-T_Mobile.jpg"},
{"category":"apple","src":"http://www.pakmobileprice.com/wp-content/uploads/2015/03/Samsung-Galaxy-S6-EDGE.jpg"},
{"category":"apple","src":"http://www.pakmobileprice.com/wp-content/uploads/2015/03/Samsung-Galaxy-S6-EDGE.jpg"},
{"category":"apple","src":"http://www.pakmobileprice.com/wp-content/uploads/2015/03/Samsung-Galaxy-S6-EDGE.jpg"},
{"category":"apple","src":"http://www.pakmobileprice.com/wp-content/uploads/2015/03/Samsung-Galaxy-S6-EDGE.jpg"},
{"category":"samsung","src":"http://compareindia.ibnlive.com/media/gallery/images/2012/jul/beam_1_031058257405.jpg"},
{"category":"samsung","src":"http://www.india777.com/company_prof/11-07-2012-05-32-58-samsung-mobile-GT-S6802.jpg"}
];
$scope.filterValues = ['samsung','apple'];
$scope.refreshData = function(val){
$scope.filterData = [];
// notify the carousel about data change
$rootScope.$broadcast('owlCarousel.changeStart');
$timeout(function(){
if (!val) val = '';
$scope.filterData = $filter('filter')($scope.carouselData, {category: val});
console.log($scope.filterData);
// notify the carousel that data is changed
$rootScope.$broadcast('owlCarousel.changeEnd');
});
}
$scope.refreshData('');
}).directive("owlCarousel", function($timeout) {
return {
restrict: 'E',
transclude: false,
link: function (scope) {
scope.initCarousel = function(element) {
// provide any default options you want
var defaultOptions = {
};
var customOptions = scope.$eval($(element).attr('data-options'));
// combine the two options objects
for(var key in customOptions) {
defaultOptions[key] = customOptions[key];
}
// init carousel
$(element).owlCarousel(defaultOptions);
// Event to remove the carousel on data change start
scope.$on('owlCarousel.changeStart', function(data) {
console.log('owlCarousel.destroy');
var data = $(element).data('owlCarousel');
if (data) data.destroy();
});
// Event to create the carousel back when data change is completed
scope.$on('owlCarousel.changeEnd', function(data) {
$timeout(function() {
console.log('owlCarousel.create ');
$(element).owlCarousel(defaultOptions);
});
});
};
}
};
})
.directive('owlCarouselItem', [function() {
return {
restrict: 'A',
transclude: false,
link: function(scope, element) {
// wait for the last item in the ng-repeat then call init
if(scope.$last) {
scope.initCarousel(element.parent());
}
}
};
}]);
.items img
{
max-width:100%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.transitions.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js" />
<script data-require="[email protected]" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
<script data-require="[email protected]" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<div ng-app="plunker" ng-controller="MainCtrl">
<div class="container">
<div class="row">
<div class="col-md-12">
<select ng-change="refreshData(selectedItem)" ng-model="selectedItem" ng-options="opt for opt in filterValues" >
<option value="" selected="selected">Select the filter</option>
</select>
<data-owl-carousel class="owl-carousel" data-options="{navigation: false, pagination: true, rewindNav : false,items:4,pagination : true, paginationNumbers: false}">
<div owl-carousel-item="" ng-repeat="item in filterData" class="items" data-owl-carousel>
<img src="{{item.src}}"/>
<h4 class="text-center">{{item.category}}</h4>
</div>
</data-owl-carousel>
</div></div></div></div>
沒有我的回答解決這個問題？如果是，請考慮將其標記爲「已接受」，如果不是，請對其進行評論並解釋其中的錯誤。 –
對於遲到的回覆感到抱歉。您的答案解決了這個問題，非常感謝 –