Bootstrap AngularJS

Question

I was trying to use Carousel (ui.bootstrap.carousel) bootstrap. 我试图使用Carousel（ui.bootstrap.carousel）引导程序。 I just simply copied the codes given and added it into my project. 我只是简单地复制给出的代码并将其添加到我的项目中。 But it's not working as expected. 但是它没有按预期工作。

index.html index.html

<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.3.js"></script>
    <script src="app.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="CarouselDemoCtrl">
  <div style="height: 305px">
    <carousel interval="myInterval" no-wrap="noWrapSlides">
      <slide ng-repeat="slide in slides" active="slide.active">
        <img ng-src="{{slide.image}}" style="margin:auto;">
        <div class="carousel-caption">
          <h4>Slide {{ $index }}</h4>
          <p>{{ slide.text }}</p>
        </div>
      </slide>
    </carousel>
  </div>
  <div class="row">
    <div class="col-md-6">
      <button type="button" class="btn btn-info" ng-click="addSlide()">Add Slide</button>
      <div class="checkbox">
        <label>
          <input type="checkbox" ng-model="noWrapSlides">
          Disable Slide Looping
        </label>
      </div>
    </div>
    <div class="col-md-6">
      Interval, in milliseconds: <input type="number" class="form-control" ng-model="myInterval">
      <br />Enter a negative number or 0 to stop the interval.
    </div>
  </div>
</div>
  </body>
</html>

and app.js 和app.js

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function ($scope) {
  $scope.myInterval = 5000;
  $scope.noWrapSlides = false;
  var slides = $scope.slides = [];
  $scope.addSlide = function() {
    var newWidth = 600 + slides.length + 1;
    slides.push({
      image: '//placekitten.com/' + newWidth + '/300',
      text: ['More','Extra','Lots of','Surplus'][slides.length % 4] + ' ' +
        ['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4]
    });
  };
  for (var i=0; i<4; i++) {
    $scope.addSlide();
  }
});

But I am getting an error as follows. 但是我收到如下错误。 Can someone explain to me what is index is. 有人可以向我解释什么是索引。 Am using Django frame work in my project. 我在我的项目中使用Django框架。 Thats the root cause of the problem. 那就是问题的根本原因。 Please help me on it, thanks in advance. 请帮助我，在此先感谢。

I have used {%load verbatim%} . 我已使用{%load verbatim%} 。 But I got an error as "'verbatim' is not a valid tag library: Template library verbatim not found, tried django.templatetags.verbatim,django.contrib.admin.templatetags.verbatim,django.contrib.staticfiles.templatetags.verbatim." 但是我收到一个错误消息，因为“'verbatim'不是有效的标记库：找不到逐字模板库，尝试过django.templatetags.verbatim，django.contrib.admin.templatetags.verbatim，django.contrib.staticfiles.templatetags.verbatim。 ”

Answer 1

I used verbatim again as follows. 我再次如下使用逐字记录。 Now its working. 现在可以正常工作了。

<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.3.js"></script>
    <script src="static/js/app.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
{%verbatim%}
<body>

<div ng-controller="CarouselDemoCtrl">
    <div style="height: 30px">
        <carousel interval="myInterval" no-wrap="noWrapSlides">
            <slide ng-repeat="slide in slides" active="slide.active">
                <img ng-src="{{slide.image}}" style="margin:auto;">

                <div class="carousel-caption">
                    <h4>Slide {{$loggedin}}</h4>
                    <p>{{slide.text}}</p>
                </div>

            </slide>
        </carousel>
    </div>
    <!--<div class="row">-->
        <!--<div class="col-md-6">-->
            <!--<button type="button" class="btn btn-info" ng-click="addSlide()">Add Slide</button>-->
        <!--</div>-->
    </div>
</div>
</body>
{%endverbatim%}
</html>

Bootstrap AngularJS

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-08-25 12:52:24

Bootstrap AngularJS

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-08-25 12:52:24

解决方案1
0 已采纳 2015-08-25 12:52:24