Question

我正在尝试在Bootstrap模式中制作幻灯片（Bootstrap Carousel）。就此而言，我想动态添加使用AngularJS提供数据的新幻灯片容器。到目前为止，我能够制作幻灯片1并使用对象完成该操作，然后通过函数将值传递给它们。

我想传递包含图像，描述和标题等内容的3或4个函数，代码应该在轮播中添加新项目。

这是index.html

<!DOCTYPE html>
<html ng-app="modalApp">
  <head>
    <title>This is a custom modal</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
    <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <div ng-controller="modalAppController">

      <button class="btn btn-primary" data-toggle="modal" data-target="#whatsNewModal">Open Modal</button>
      <!-- Whats New feature modal -->
<div id="whatsNewModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">

        <!-- Modal Header -->

        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">x</button>
          <h3 class="modal-title" style="color: #000"><strong><i class="fa fa-bullhorn" style="margin-right: 10px"></i><span>What's New</span></strong></h3>
        </div>

        <!-- Modal Body/Modal Content -->

        <div class="modal-body">
          <div id="whatsNewCarousel" class="carousel slide" data-ride="carousel" data-interval="3000">

            <!-- Carousel Images -->

            <div class="carousel-inner" role="listbox">
              <div class="item">
                  <img ng-src="{{modalContent.Src}}" alt="New Features Screenshots" class="img-fluid d-block">
                  <hr>

                  <div class="content">
                    <center>
                      <h3>{{modalContent.Head}}</h3>
                      <h4>{{modalContent.Desc}}</h4>
                    </center>
                  </div>
                </div>

            <!-- Carousel Controls -->

            <a class="left carousel-control" href="#whatsNewCarousel" role="button" data-slide="prev" style="background: transparent">
              <span class="glyphicon glyphicon-chevron-left" aria-hidden="true" style="color: #dcdde1; top: 40%; left: 10px; font-size: 40px"></span>
              <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#whatsNewCarousel" role="button" data-slide="next" style="background: transparent">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true" style="color: #dcdde1; top: 40%; right: 22px; font-size: 40px"></span>
                <span class="sr-only">Previous</span>
            </a>
          </div>
        </div>

      </div>
    </div>
</div>
    </div>
  </body>
</html>

app.js

(function(){
  'use strict';

  angular.module('modalApp', [])
  .controller('modalAppController', modalAppController)
  modalAppController.$inject = ['$scope'];
  function modalAppController($scope){
    $scope.carouselData = function(src, head, desc){
      $scope.modalContent = {
        Src : src,
        Head: head,
        Desc: desc
      };
    };

    $scope.carouselData("Screen.png", "Feature 1", "Here goes the description");
    $scope.carouselData("Screen2.png", "Feature 2", "Here goes the description"); // I want to pass more functions like this.
  }
})();

使用AngularJS将内容添加到Bootstrap模式

0 个答案: