Question

我们正在使用Bootstrap Carousel，并希望加载动态幻灯片（数组中每个项目的幻灯片）。 AngularJS用于生成数组和循环。

但是在运行时，我们收到了javascript错误TypeError: f[0] is undefined。该数组由$ http.get

填充

尝试了https://docs.angularjs.org/和http://w3schools.com

的替代可能性

如果在脚本中定义数组而不使用$ http.get
$ http.get生成的数组在“tr ng-repeat”

这是代码：

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

Answer 1

从您的div中删除 data-ride =＆＃34;轮播＆＃34;

Answer 2

在 carousel-inner 中，应该有一个项，它也是有效

我不知道如何以角度来做这个，但这就是我用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>

bootstrap carousel TypeError：f [0]未定义

2 个答案: