2014-07-11 18 views
3

下面的代码在没有ng-repeat的情况下工作正常。但我想重复使用ng-repeat的所有div。Owl-Carousel不能与AngularJs ng-repeat一起使用

<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中重复。我真的很新,角和jQuery。

+0

怎么ü解决猫头鹰旋转木马这个NG-重复问题!! ??? –

回答

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

您还没有粘贴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

+0

我能够对div进行ng-repeat工作,但它不能继承owl-carousel实现的类。 –

+0

你在说什么课?并继承哪里?你的意思是在css中的猫头鹰主题?像.owl-theme.item这样的东西? – Bolza

相关问题