We are currently utilizing Bootstrap Carousel to load dynamic slides, with each slide corresponding to an item in an array. AngularJS is employed to create the array and iterate through it.
However, during execution, we encountered a javascript error TypeError: f[0] is undefined. The array is populated using $http.get.
We explored different options on https://docs.angularjs.org/ and
- The Carousel functions properly when the array is defined within the script without employing $http.get.
- The array generated by $http.get is correctly displayed in "tr ng-repeat".
This is the provided 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>