ng-repeat Owl Carousel

Directive for initializing Owl Carousel in AngularJS ng-repeat

Download

NPM

npm install ng-repeat-owl-carousel --save

Bower

bower install ng-repeat-owl-carousel --save

Usage

Add source file to your view

<script src="ngRepeatOwlCarousel.min.js"></script>

Add module as dependency to your app

angular.module('app', ['ocNgRepeat'])

Create Owl Carousel initializer method on controller or page

  app.controller("TeamController", [ function() {
      var ctrl;
      ctrl = this;
      ctrl.members = []
 
      ctrl.carouselInitializer = function() {
        $(".about-carousel").owlCarousel({
          items: 3,
          navigation: true,
          pagination: false,
          navigationText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"]
        });
      };
    }
  ]);

Add directive to your view and pass carousel initializer method

<div ng-controller="TeamController as tCtrl">
    <div ng-repeat="mbr in tCtrl.members" ng-repeat-owl-carousel carousel-init="tCtrl.carouselInitializer">
    </div>
</div>