【问题标题】:Owl-Carousel not working with AngularJs ng-repeatOwl-Carousel 不适用于 AngularJs ng-repeat
【发布时间】:2014-09-01 20:04:30
【问题描述】:

下面的代码在没有 ng-repeat 的情况下可以正常工作。但我想使用 ng-repeat 重复所有 div。

<div id="food-menu" class="owl-carousel owl-theme">
    <div class="item">
        <div class="thumbnail">
        <img class="lazyOwl" data-src="/img/Services/Food/Meal-1.png" alt="Food">
        <div class="caption">
                <h3>Thumbnail label</h3>
            <p>...</p>
                <div><span class="price">$ 00.00</span><a href="#" class="btn btn-primary" role="button">Button</a></div>
        </div>enter code here
        </div>
    </div>
</div>

但是当我创建这样的代码时,它会停止工作。

<div ng-repeat="t in test">
<div id="food-menu" class="owl-carousel owl-theme">
    <div class="item">
        <div class="thumbnail">
        <img class="lazyOwl" data-src="/img/Services/Food/Meal-1.png" alt="Food">
        <div class="caption">
                <h3>Thumbnail label</h3>
            <p>...</p>
                <div><span class="price">$ 00.00</span><a href="#" class="btn btn-primary" role="button">Button</a></div>
        </div>
        </div>
    </div>
</div>
</div>

编辑:让 ng-repeat 重复所有 div 以及其中的类的最简单方法是什么。我发布的最后一个代码没有显示任何内容,并且每个 div 中都没有重复这些类。我对 Angular 和 jquery 真的很陌生。

【问题讨论】:

  • 你是如何用 owl carousel 解决这个 ng-repeat 问题的!!???

标签: angularjs carousel ng-repeat


【解决方案1】:

我准备了一个带有您的标记的 Plunker:http://plnkr.co/edit/0bgevXraCpWwFMpROO0h,并且通过适当的 Angular 启动和控制器工作正常。

var app = angular.module('plunker', []);
app.controller('MainCtrl',  function ($scope) {
  $scope.test = ['a','b', 'c'];
});

-

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <div ng-repeat="t in test">
       <p>{{t}}  </p>  
    </div>    
  </body>
</html>

如果您需要 Angular 相关问题的帮助,您还没有粘贴您的 JS 代码,这是最重要的事情。 我认为你应该从一个完整的教程开始学习基础知识,只是在编辑器中粘贴一些代码不会让你有任何收获。

AngularJS 网站http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro上有一个很棒的视频教程系列

这应该是您的起点和参考网站。

或者您可以尝试用户创建的教程http://www.toptal.com/angular-js/a-step-by-step-guide-to-your-first-angularjs-app

【讨论】:

  • 我可以让 ng-repeat 在 div 上工作,但它不能继承 owl-carousel 实现的类。
  • 你说的是哪个班?并继承在哪里?你的意思是css中的猫头鹰主题?像 .owl-theme.item 之类的东西?
  • 这不应该是答案。它与问题无关。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2018-07-29
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多