Geek Answers Handbook

Bootstrap carousel TypeError: f [0] - undefined

We are working with Bootstrap Carousel and want to load dynamic slides (a slide for each element in the array). AngularJS is used to generate an array and a loop.

But while working, we got a javascript error TypeError: f[0] is undefined. The array is populated with $ http.get

Tried alternative features from https://docs.angularjs.org/ and http://w3schools.com

  • Carousel works if array is defined in script without using $ http.get
  • $ http.get generated array is displayed correctly in "tr ng-repeat"

This is the code:

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Fresh</title>
<link rel="stylesheet"
    href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script
    src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script
    src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">

        <div ng-show="names.length">

            <div id="myCarousel" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="{{ $index }}"
                        ng-repeat="x in names"></li>
                </ol>

                <div class="carousel-inner" role="listbox">
                    <div class="item" ng-repeat="x in names">{{x.Name}}
                        {{x.Country}}</div>
                </div>

                <a class="left carousel-control" href="#myCarousel" role="button"
                    data-slide="prev"> <span
                    class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a> <a class="right carousel-control" href="#myCarousel" role="button"
                    data-slide="next"> <span
                    class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>

            </div>

        </div>
    </div>

    <script>

        // window.alert('Inside script');
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope, $http) {
            // window.alert( 'Inside controller' );
            $scope.names = [];
            $http.get("http://www.w3schools.com/angular/customers.php").then(
                    function(response) {
                        $scope.names = response.data.records;
                        window.alert('Inside get');
                    });

        });
    </script>
</body>
</html>
+4
source share
2

data-ride = "" div

+5

- ,

, angular, php. .

<div class="carousel-inner" role="listbox">
<?php foreach ($pages as $i => $page): ?>

    // make first item active
    <div class="item <?php if($i == 0) { echo "active"; } ?>">
    <img src="data:image/jpg;base64,<?php echo $page['data'] ?>" alt="...">
        <div class="carousel-caption">
            <?php echo "asdfsadfasd" ?>      
        </div>
    </div>
<?php endforeach; ?>
</div>
+1

More articles:


All Articles