猫头鹰传送带与AngularJs NG-重复工作 [英] Owl-Carousel not working with AngularJs ng-repeat

查看:242
本文介绍了猫头鹰传送带与AngularJs NG-重复工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在code下面没有NG重复工作正常。但我想重复使用NG-重复的所有分区。

The code below works fine without ng-repeat. But i would like to repeat all the div using 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>

但是当我创建了code这个样子,它停止工作。

But when i create the code like this, it stops working.

<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-重复再重复所有的分度,它里面的类一起最简单的方法。最后code,我贴显示任何内容,并在每一个的div没有被重复的类。林真正的新角度和jQuery。

What is the simplest way to make the ng-repeat repeat all the div along with the classes inside it. The last code that i posted displays nothing and the classes were not being repeated in each divs. Im really new to angular and jquery.

推荐答案

我prepared与您的标记一个Plunker:的 http://plnkr.co/edit/0bgevXraCpWwFMpROO0h 并用适当的角度启动和控制工作正常。

I prepared a Plunker with your markup: http://plnkr.co/edit/0bgevXraCpWwFMpROO0h and with the appropriate Angular startup and controller is working fine.

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 code这是最重要的事情,如果你会需要对角相关问题的帮助。
我想你应该开始从完整的教程学习非常基础,只是粘贴在编辑器中的一些code不会得到你的任何地方。

You haven't paste your JS code which is the most important thing if you're going to need help on Angular related issues. I think you should start learning the very basics from a complete tutorial, just pasting some code in the editor won't get you anywhere.

还有的AngularJS网站的 HTTP://campus.$c$cschool.com/courses/shaping-up-with-angular-js/intro

There's a terrific video-tutorial series on the AngularJS website http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro

这应该是你的出发点和参考网站。

This should be your starting point and reference website.

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

Or you can try an user created tutorial http://www.toptal.com/angular-js/a-step-by-step-guide-to-your-first-angularjs-app

这篇关于猫头鹰传送带与AngularJs NG-重复工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆