Question

我正在尝试迭代一个对象数组，我希望在模型中显示一个轮播。

我尝试过使用ng-repeat但是没有救援。

所以，基本上我想要实现的是点击“新建”按钮时应该打开一个模态，然后模态会启动一个旋转木马，它会从对象数组中获取数据。

这是我到目前为止所做的。

 

   (function() {
      'use strict';
      var app = angular.module('myApp', []);
      app.component("logModal", {
      templateUrl: 'logModalTemp.html',
      bindings: {
        name: '@'
      },
      controller: function() {
        this.title = "Modal using Component";
        this.logs = [{
            "screenImage": "WhatsNew.png",
            "featureName": "User Analysis",
            "Desc": "Check it now"
          },
          {
            "screenImage": "Screen.png",
            "featureName": "New UI",
            "Desc": "UI revamped"
          },
          {
            "screenImage": "Screen.png",
            "featureName": "New UI",
            "Desc": "UI revamped"
          }
        ];
      }
    });
 })();

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <title>Bootstrap Modal using Component</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="app.js"></script>
</head>
<body>
  <div>
    <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#logBTModal">What's New</button>
    <!-- Modal Starts -->
    <log-modal></log-modal>
    <script type="text/ng-template" id="logModalTemp.html">
      <div id="logBTModal" class="modal fade" role="dialog">
        <div class="modal-dialog">

          <!-- Modal content -->
          <div class="modal-content">

            <!-- Modal header -->
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">{{$ctrl.title}}</h4>
            </div>

            <!-- Modal body -->
            <div class="modal-body">

              <!-- Carousel Starts -->
              <div id="myCarousel" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner" ng-repeat="log in logs">

                  <div class="item active">
                    <img ng-src="{{log.screenImage}}">
                    <div class="content">
                      <h3>{{log.featureName}}</h3>
                      <h4>{{log.Desc}}</h4>
                    </div>
                  </div>

                </div>

                <!-- Left and Right controle -->
                <a class="left carousel-control" href="#myCarousel" data-slide="prev" style="background: none !important">
                  <span class="glyphicon glyphicon-chevron-left"></span>
                  <span class="sr-only">Previous</span>
                </a>

                <a class="right carousel-control" href="#myCarousel" data-slide="next" style="background: none !important">
                  <span class="glyphicon glyphicon-chevron-right"></span>
                  <span class="sr-only">Next</span>
                </a>

              </div>
            </div>

          </div>
        </div>
      </div>
    </script>

  </div>
</body>

</html>

Answer 1

Insted of

ng-repeat="log in logs"

使用此

ng-repeat="log in $ctrl.logs"

小提琴https://jsfiddle.net/r4k40ob4/3/

更新： -

根据您的要求，您可以使用`ng-class'

 <div class="item" ng-class="{'active': $index == 0}">

看到这个更新的小提琴 https://jsfiddle.net/r4k40ob4/12/

现在你必须放置验证

Answer 2

你通过角度组件即时控制器，并且有一个别名控制器$ctrl。

您必须使用$ctrl.logs从您的组件中调用logs变量。

我建议您使用＆$ 39;跟踪$ index`来重复使用相同索引的元素

你说，Yeah, got it. Now, carousel is not working probably because all of the DIV's are getting active class. How can I assign only the first child of the DIV having class "Carousel Inner" with a class ="active"?

为什么不使用ngClass并仅将活动设置为第一个元素？当然，那么你必须创建一个函数来设置active class到你的下一个元素。

ng-class = { 'active' : $index == 0 }

使用AngularJS组件迭代存储在控制器中的对象数组

2 个答案: