Angular js owl滑块数据过滤问题

时间：2016-03-15 18:20:14

标签： javascript angularjs angularjs-directive owl-carousel

我必须创建带有ng-repeat的owl滑块来制作幻灯片。我遇到问题时，我使用下拉列表过滤数据，幻灯片中的值会更新，但滑块不起作用并打破UI.I为这个问题创建了一个codepen。

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

以下是 Codepen的网址供参考

1 个答案:

答案 0 :(得分：1)

这里的问题是owlCarousel将orignal项包装到其他div中，HTML看起来像这样：

<data-owl-carousel class="owl-carousel owl-theme" data-options="...">
      <!-- ngRepeat: item in  filterData -->
      <div class="owl-wrapper-outer">
          <div class="owl-wrapper" style="width: 4320px; left: 0px; display: block;">
              <div class="owl-item" style="width: 240px;">
                  <div owl-carousel-item="" ng-repeat="item in  filterData" class="items ng-scope" data-owl-carousel="">
                    <img src="http://compareindia.ibnlive.com/media/gallery/images/2012/jul/beam_1_031058257405.jpg">
                    <h4 class="text-center ng-binding">samsung</h4>
                  </div>
              </div>
              <div class="owl-item" style="width: 240px;">
                  <div owl-carousel-item="" ng-repeat="item in  filterData" class="items ng-scope" data-owl-carousel="">
                    <img src="http://www.india777.com/company_prof/11-07-2012-05-32-58-samsung-mobile-GT-S6802.jpg">
                    <h4 class="text-center ng-binding">samsung</h4>
                  </div>
              </div>
              ...

您可以看到.owl-carousel-item类的原始div包含在其他.owl-item div中。

一旦你过滤了数据，angular会删除ng-repeated divs并插入new，但它对包装器一无所知，所以HTML就变成了这样：

<data-owl-carousel class="owl-carousel owl-theme" data-options="...">
    <!-- ngRepeat: item in  filterData -->
    <div owl-carousel-item="" ng-repeat="item in  filterData" class="items ng-scope" data-owl-carousel="">
        <img src="http://compareindia.ibnlive.com/media/gallery/images/2012/jul/beam_1_031058257405.jpg">
        <h4 class="text-center ng-binding">samsung</h4>
    </div>
    <div class="owl-wrapper-outer">
        <div class="owl-wrapper" style="width: 5706px; left: 0px; display: block; transition: all 0ms ease; transform: translate3d(0px, 0px, 0px);">
            <div class="owl-item" style="width: 317px;"></div>
            <div class="owl-item" style="width: 317px;"></div>
            ...

在顶部有一个新的（已过滤的）数据，然后是空的owlCarousel的包装器。

解决方案（代码如下）是在过滤数据时销毁/重新创建owlCarousel。 其他解决方案可以修改owlCarousel代码，以便不使用包装器div或切换到其他更友好的角度转盘。

无论如何，这是工作代码：

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="angular.js@1.3.x" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
    <script data-require="jquery@2.1.3" 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>

相关问题
最新问题