Question

bootstrap carousel TypeError: f[0] 未定义

2016-02-27

7498

javascript arrays angularjs twitter-bootstrap carousel

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

但在运行时，我们收到一个 javascript 错误 TypeError: f[0] 未定义 。数组由 $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="carousel"

oezix

2016-05-24

Answer 2

在 carousel-inner 中应该有一个 item 也是 active 的。

我不知道如何在 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>