Tej*_*ini 4 javascript arrays carousel twitter-bootstrap angularjs
我们正在使用Bootstrap Carousel并且想要加载动态幻灯片(数组中每个项目的幻灯片).AngularJS用于生成数组和循环.
但是在运行时,我们遇到了一个javascript错误TypeError: f[0] is undefined .该数组由$ http.get填充
尝试了https://docs.angularjs.org/和http://w3schools.com的其他可能性
这是代码:
<!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>