Question

我正在使用AngularJS和Bootstrap-UI，并且我正在使用carousel指令。当我的Ctrl中的图像指向网站（lorumpixel.com）时，图像出现;但是，我有想要放入网站的图片。

<div ng-controller="CarouselCtrl">
  <div carousel interval="3000">
    <div slide ng-repeat="slide in slides" active="slide.active">
      <img ng-src="{{slide.image}}">
      <div class="carousel-caption animated slideInLeft">
        <h2>Slide {{$index}}</h2>
        <p>{{slide.text}}</p>
      </div>
    </div>
  </div>
</div>

和我的控制器

'use strict';

angular.module('angularApp')
  .controller('CarouselCtrl', function ($scope) {

    $scope.slides = [];
    $scope.slides.push({text: '', image: 'images/bg-2.jpg'});

    $scope.setActive = function(idx) {
      $scope.slides[idx].active=true;
    };
  });

我希望在本周末之前建立这个网站，所以非常感谢任何帮助。提前谢谢。

Answer 1

roof.controller.js 

angular.module('monsterApp').controller('CarouselCtrl', function ($scope) {
  $scope.myInterval = 5000;
  $scope.noWrapSlides = false;
  var slides = $scope.slides = [];
  $scope.addSlide = function() {
    var newWidth = 1500 + slides.length + 1;
    slides.push({
        url:  "http://res.cloudinary.com/dqa0blkfn/image/upload/v1436283760/monster-head_tnxloc.jpg",
   /*   url: '//placekitten.com/' + newWidth + '/300',      */

      text: [' ',' ',' ',' '][slides.length % 4] + ' ' +
      ['    ', '    ', '  ', '   '][slides.length % 4]
    });
  };



roof.html


<div ng-controller="CarouselCtrl">
    <div style="height: 305px">
      <carousel interval="myInterval" no-wrap="noWrapSlides">
        <slide ng-repeat="slide in slides" active="slide.active">
          <img ng-src="{{slide.url}}" 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>

Bootstrap-UI本地图像未显示

1 个答案: