Question

以下代码在没有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中没有重复这些类。我对角度和jquery很新。

Answer 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

Owl-Carousel不使用AngularJs ng-repeat

1 个答案: