Javascript Angular js owl滑块数据过滤问题

我必须使用ng repeat创建owl slider来制作幻灯片。当我使用下拉菜单过滤数据时，我遇到了一个问题，幻灯片中的值已更新，但滑块不工作并破坏了UI。我已为此问题创建了一个代码笔`

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

选择过滤器
{{item.category}

---

以下是的url供参考

这里的问题是owlCarousel将原始项包装到其他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>
              ...

在顶部有一个新的（过滤的）数据，然后是空的猫头鹰转盘的包装

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

无论如何，以下是工作代码：

var-app=angular.module（'plunker'，[]）；
app.controller（'MainCtrl'，函数（$scope、$rootScope、$filter、$timeout）{
//$scope.items2=[1,2,3,4,5,6,7,8,9,10]；
$scope.carouselData=[
{“类别”：“三星”，“src”：”http://compareindia.ibnlive.com/media/gallery/images/2012/jul/beam_1_031058257405.jpg"},
{“类别”：“三星”，“src”：”http://www.india777.com/company_prof/11-07-2012-05-32-58-samsung-mobile-GT-S6802.jpg"},
{“类别”：“苹果”，“src”：”http://androidos.in/wp-content/uploads/2011/12/Galaxy-S-II-T_Mobile.jpg"},
{“类别”：“苹果”，“src”：”http://www.pakmobileprice.com/wp-content/uploads/2015/03/Samsung-Galaxy-S6-EDGE.jpg"},
{“类别”：“苹果”，“src”：”http://www.pakmobileprice.com/wp-content/uploads/2015/03/Samsung-Galaxy-S6-EDGE.jpg"},
{“类别”：“苹果”，“src”：”http://www.pakmobileprice.com/wp-content/uploads/2015/03/Samsung-Galaxy-S6-EDGE.jpg"},
{“类别”：“苹果”，“src”：”http://www.pakmobileprice.com/wp-content/uploads/2015/03/Samsung-Galaxy-S6-EDGE.jpg"},
{“类别”：“三星”，“src”：”http://compareindia.ibnlive.com/media/gallery/images/2012/jul/beam_1_031058257405.jpg"},
{“类别”：“三星”，“src”：”http://www.india777.com/company_prof/11-07-2012-05-32-58-samsung-mobile-GT-S6802.jpg"}
];
$scope.filterValues=[‘三星’、‘苹果’]；
$scope.refreshData=函数（val）{
$scope.filterData=[]；
//将数据更改通知传送带
$rootScope.$broadcast（'owlCarousel.changeStart'）；
$timeout（函数（）{
如果（！val）val=''；
$scope.filterData=$filter（'filter'）（$scope.carouselData，{category:val}）；
log（$scope.filterData）；
//通知传送带数据已更改
$rootScope.$broadcast（'owlCarousel.changeEnd'）；
});  
}
$scope.refreshData（“”）；
}).指令（“owlCarousel”，函数（$timeout）{
返回{
限制：'E'，
排除：错误，
链接：功能（范围）{
scope.initCarousel=函数（元素）{
//提供您想要的任何默认选项
var defaultOptions={
};
var customOptions=scope.$eval（$（元素）.attr（'data-options'）；
//将两个选项组合到对象中
for（自定义选项中的var键）{
defaultOptions[key]=自定义选项[key]；
}
//初始旋转木马
$（元素）.owlCarousel（默认选项）；
//事件以在数据更改开始时移除转盘
作用域：$on（'owlCarousel.changeStart'，函数（数据）{
console.log（'owlCarousel.destroy'）；
变量数据=$（元素）.data（'owlCarousel'）；
if（data）data.destroy（）；
});
//事件，以在数据更改完成时创建回转盘
作用域：$on（'owlCarousel.changeEnd'，函数（数据）{
$timeout（函数（）{
log（'owlCarousel.create'）；
$（元素）.owlCarousel（默认选项）；
});  
});
};
}
};
})
.directive（'owlCarouselItem'，[function（）{
返回{
限制：“A”，
排除：错误，
链接：功能（范围、元素）{
//等待ng repeat中的最后一项，然后调用init
如果（范围$last）{
initCarousel（element.parent（））；
}
}
};
}]);

.items img
{
最大宽度：100%；
}

选择过滤器
{{item.category}

我的答案解决问题了吗？如果是这样的话，请考虑将它标记为“接受”，如果不是，请对此进行评论，并解释它的错误之处。您的答案解决了问题，非常感谢，因此您还可以使用：

$（element.owlCarousel（'destroy'）销毁旋转木马
<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>
            ...