Есть ли способ использовать фильтр AngularJS без нарушения сова-карусели? - PullRequest
Новая
       19

Есть ли способ использовать фильтр AngularJS без нарушения сова-карусели?

0 голосов
/ 06 мая 2019

Я использовал директивы owl-carousel внутри моего приложения AngularJS, чтобы заставить ng-repeat работать так, как задумано. К сожалению, когда я пытаюсь отфильтровать динамически отображаемые элементы с помощью выпадающего списка, это полностью нарушает мой пользовательский интерфейс.

Вот элемент SELECT: 

<select ng-model="selectedItem" ng-options="plan.name for plan in item.plans" ng-change="refreshData(selectedItem)">
   <option value="">-- Everything--</option>
</select>

Вот элемент CAROUSEL: 

<data-owl-carousel class="owl-carousel owl-theme" data-options="owlOptionsTestimonials">
   <div owl-carousel-item="" class="item" ng-repeat="plan in item.plans | filter:selectedItem">
      <div class="card" >
         <div class="product s-badge">
            <div class="title {{plan.color}}">
               <div class="text">
                  <h2>Plan {{plan.name}}<strong></strong></h2>
               </div>
            </div>
            <div class="description product-content jsrow" data-jsrowid="productcontent">
               <ul class="listing">
                  <li class="sb">
                     <figure><img src="images/icon_whatsapp_color.png" alt=""></figure>
                     <div class="text">
                        <p ng-bind-html="plan.text_2 | trustHtml"></p>
                     </div>
                  </li>
               </ul>
            </div>
         </div>
      </div>
   </div>
</data-owl-carousel>

Как видите, я использую ng-модель элемента SELECT в качестве фильтра. Это на самом деле работает, но это ломает все. Я попытался прочитать несколько похожих проблем, уже предложенных на этом сайте, но ни одна из них не сработала для меня. И я считаю, что это как-то связано со структурой элементов JSON, которые я рендерим.

Вот пример: 

[{
  "country": "Afganistán",
  "llamadasEntrantes": "false",
  "packs": [],
  "plans": []
  },{
  "country": "Albania",
  "llamadasEntrantes": "true",
  "packs": [{"name": "Mundo"}],
  "plans": [{
    "name": "4 GB",
    "text_1": "",
    "text_2": "WhatsApp gratis en todo el mundo",
    "enlace": "plan/4gb/",
    "color": "cyan4"
}]

В обоих случаях, как вы уже заметили, я отрисовываю элементы внутри атрибута "plan ".

И последнее, но не менее важное. Вот мои директивы о сове-карусели: 

.directive("owlCarousel", function() {
        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
                    var curOwl = $(element).data('owlCarousel');
                    if (!angular.isDefined(curOwl)) {
                        $(element).owlCarousel(defaultOptions);
                    }
                    scope.cnt++;
                };
            }
        };
    })

    .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());
                    }
                }
            };
        }
    ])

По сути, мне нужно отфильтровать карусельные элементы, не ломая сову-карусель.

Заранее спасибо.

...