Iterating over an array of objects stored in controller using AngularJS components

Question

I am trying to iterate over an array of objects from which I want to display a carousel inside a modal.

I tried using ng-repeat but it's of no rescue.

So, basically what I want to achieve is that on clicking the whats New button a modal should open and the modal then starts a carousel which takes the data from the array of objects.

Here is what I have done so far.

 

   (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>

Is the modal title getting displayed? If so, try $ctrl.logs like you did with the modal title. — NiK648
– NiK648, Commented Feb 21, 2018 at 5:31

Kiran Shinde · Accepted Answer · 2018-02-21 05:56:05Z

2

Insted of

ng-repeat="log in logs"

Use this

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

Fiddle https://jsfiddle.net/r4k40ob4/3/

Update:-

As per your requirement you can use `ng-class'

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

See this updated Fiddle https://jsfiddle.net/r4k40ob4/12/

Now you have to just put validations

edited Feb 21, 2018 at 5:56

answered Feb 21, 2018 at 5:32

Kiran Shinde

6,0326 gold badges30 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

s4tr2 Over a year ago

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"?

Kenry Sanchez · Accepted Answer · 2018-02-21 05:43:05Z

1

you are instant your controller through an angular component, and into there is an alias controller $ctrl.

You have to use $ctrl.logs to call your logs variable from your component.

I suggest you use 'track by $index` to no repeat elements with the same index

You said up, 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"?

Why don't you use ngClass and set active only to the first element? Of course, then you have to create a function for set active class to your next element.

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

edited Feb 21, 2018 at 5:43

answered Feb 21, 2018 at 5:38

Kenry Sanchez

1,7432 gold badges19 silver badges24 bronze badges

4 Comments

s4tr2 Over a year ago

Did that as you mentioned and yeah, now it is showing one image instead of 3 but still the carousel is not moving.

s4tr2 Over a year ago

On the fiddle itself, it is working for the very first time, like the carousel is not looping over which it should.

s4tr2 Over a year ago

Yeah, I am done with it. It's working as I wanted. Thank you.

s4tr2 Over a year ago

Is there any way where we can make this slideshow slide for every three seconds. I tried using setInterval but it didn't worked out.

Collectives™ on Stack Overflow

Iterating over an array of objects stored in controller using AngularJS components

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related