CODEWITHSUNDEEP
angularjsangularjs-ng-repeatowl-carousel
Aditya Irri
Aditya Irri

Reputation: 55

angularjs ng-repeat is not working to owl-carousel

I'm running into an issue where whenever the ng-repeat directive is applied to carousel the items are stacked vertically instead of being layout horizontally.

Screenshot for reference

After Applying ng-repeat

If I leave out ng-repeat and use static items then it works as it should.

When used static

HTML Code for ng-repeat

<section class="mp diff-types-section main-movies-position">

  <div class="mp our-recommend-sec">
    <div id="owl-demo2" class="owl-carousel" ng-repeat="movie in movieList">
      <div class="item">
        <div class="types-section">
          <img class="types-section-image image-opacity" ng-src="/public/uploads/{{movie.movieId}}/backdrop.jpg" />
        </div>
      </div>
    </div>
  </div>
</section>

AngularJs Controller Code

app.controller('MainCtrl', ['$rootScope', '$scope', '$http', '$resource', '$route', '$state', '$location', 'localStorageService', function($rootScope, $scope, $http, $resource, $route, $state, $location, localStorageService) {
  $rootScope.showNav = true;
  $rootScope.searchBar = false;

  $scope.getAllMovieList = function() {
    $http.get("/api/getAllMovieList")
      .then(function(response) {
        $scope.movieList = response.data;
        console.log($scope.movieList);
      });
  }

  $scope.getAllMovieList();
}])

If I Keep The Static Code Like This its Working Fine with no issues

<section class="mp diff-types-section our-reccomendation-section">
  <div class=" mp our-recommend-sec">
    <div id="owl-demo" class="owl-carousel owl-theme">
      <div class="item">
        <div class="types-section">
          <a ng-click="goToMovieDetail()"> <img class="types-section-image" src="../../images/92ZhAYYce2KfuLgBswzW5HCMKxr.jpg"></a>

        </div>
      </div>
      <div class="item">
        <div class="types-section" ng-click="goToMovieDetail()">
          <img class="types-section-image" src="../../images/Shooter_1920x1080.jpg">

        </div>
      </div>
      <div class="item">
        <div class=" types-section" ng-click="goToMovieDetail()">
          <img class="types-section-image" src="/public/uploads/ow168259/backdrop.jpg">

        </div>
      </div>
      <div class="item">
        <div class="types-section" ng-click="goToMovieDetail()">
          <img class="types-section-image" src="/public/uploads/ow168259/backdrop.jpg">

        </div>
      </div>
    </div>
  </div>

</section>

Hope I get Solution For this...

Thanks in Advance.

Upvotes: 2

Views: 1590

Answers (2)

Syed Faizan
Syed Faizan

Reputation: 961

Owl-carousel may not perfectly work with angularjs, would recommend you to use a carousel which supports angularjs, personally i use angular-ui-bootstrap, it has all components bootstrap has to offer but provides angular variants.

Upvotes: 2

Mitul Patel
Mitul Patel

Reputation: 154

This solution would be helpful to you

 Put owl carousel function after getting response 
 **use Like:** 
 $timeout(function(){ here your owl carousel function },10);

Upvotes: 1

Related Questions