多项目casrousel NG-RE $ P $拍拍类=＆QUOT;项目积极＆QUOT;不工作 - AngularJS [英] Multi-item casrousel ng-repreat class="item active" Not working - AngularJS
本文介绍了多项目casrousel NG-RE $ P $拍拍类=＆QUOT;项目积极＆QUOT;不工作 - AngularJS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我能够从JSON加载数据正常，但不知道为什么，下面一行是行不通的：
I am able to load the data from JSON properly but not sure why below line is not working:
<div class="item" ng-class="{active:!$index}" ng-repeat="mCarousel in mCarousels">
我把它从<一个href=\"http://stackoverflow.com/questions/25758858/angularjs-ng-repeat-with-bootstrap-carousel\">AngularJS自举传送带链接NG-重复。
我只能看到多轮播的第二个屏幕（我的意思是JSON只有2次对象）。下面是我的html code。
I took it from AngularJS ng-repeat with bootstrap carousel link. I can see only the second screen of multi carousel (I mean only 2nd objects of JSON).Below is my html code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Kitties for sale</title>
<meta name="generator" content="Bootply" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="./multiCarou/bootstrap-combined.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="./multiCarou/theme.css" type="text/css" rel="stylesheet">
<!-- CSS code from Bootply.com editor -->
</head>
<!-- HTML code from Bootply.com editor -->
<body>
<br>
<br>
<br>
<div class="container" ng-app="baniyaApp" ng-controller="multiCarouselController">
<div id="myCarousel2" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item" ng-class="{active:!$index}" ng-repeat="mCarousel in mCarousels">
<div class="row text-center">
<!-- ITEM-->
<div class="span3">
<div class="thumbnail product-item">
<a href="#"><img src="{{mCarousel.screen.view1.img}}"></a>
</div>
<h3>Kitty 1</h3>
<p><a class="btn btn-large btn-block" href="{{mCarousel.screen.view1.href}}">View details »</a></p>
</div>
<!-- ITEM-->
<!-- ITEM-->
<div class="span3">
<div class="thumbnail product-item">
<a href="#"><img src="{{mCarousel.screen.view2.img}}"></a>
</div>
<h3>Kitty 2</h3>
<p><a class="btn btn-large btn-block" href="{{mCarousel.screen.view2.href}}">View details »</a></p>
</div>
<!-- ITEM-->
<!-- ITEM-->
<div class="span3">
<div class="thumbnail product-item">
<a href="#"><img src="{{mCarousel.screen.view3.img}}"></a>
</div>
<h3>Kitty 3</h3>
<p><a class="btn btn-large btn-block" href="{{mCarousel.screen.view3.href}}">View details »</a></p>
</div>
<!-- ITEM-->
<!-- ITEM-->
<div class="span3">
<div class="thumbnail product-item">
<a href="#"><img src="{{mCarousel.screen.view4.img}}"></a>
</div>
<h3>Kitty 4</h3>
<p><a class="btn btn-large btn-block" href="{{mCarousel.screen.view4.href}}">View details »</a></p>
</div>
<!-- ITEM-->
</div>
</div>
</div><!-- /INNER-->
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel2" data-slide="prev"><i class="icon-chevron-left"></i></a>
<a class="carousel-control right" href="#myCarousel2" data-slide="next"><i class="icon-chevron-right"></i></a>
</div>
</div><!-- /CONTAINER -->
<script type='text/javascript' src="./multiCarou/jquery.min.js"></script>
<script type='text/javascript' src="./multiCarou/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="./customAngular/kitty.js"></script>
<!-- JavaScript jQuery code from Bootply.com editor -->
<script type='text/javascript'>
$(document).ready(function() {
$('.carousel').carousel({
interval: 3000
});
});
</script>
</body>
</html>
JSON文件有以下数据： -
The JSON file has following data:-
{
"screen": {
"view1":{
"img" : "http://placekitten.com/605/300",
"href": "http://www.bootstraptor.com"
},
"view2":{
"img": "http://placekitten.com/601/300",
"href":"http://www.bootstraptor.com"
},
"view3":{
"img":"http://placekitten.com/602/300",
"href":"http://www.bootstraptor.com"
},
"view4":{
"img":"http://placekitten.com/603/300",
"href":"http://www.bootstraptor.com"
}
},
"screen":{
"view1":{
"img" : "http://placekitten.com/604/300",
"href": "http://www.bootstraptor.com"
},
"view2":{
"img": "http://placekitten.com/606/300",
"href":"http://www.bootstraptor.com"
},
"view3":{
"img":"http://placekitten.com/607/300",
"href":"http://www.bootstraptor.com"
},
"view4":{
"img":"http://placekitten.com/608/300",
"href":"http://www.bootstraptor.com"
}
}
}
该kitty.js包含以下控制器，我可以看到的宾果作为警报：
var mainAngular = angular.module('baniyaApp', []);
mainAngular.controller('multiCarouselController',function($scope,$http){
var mcJson= "./customAngular/multiCarousel.json";
alert('Bingo');
$http.get(mcJson).success(function(response){
$scope.mCarousels=response;
});
});
有人能帮助我在这。我知道它其中我在这里缺少了一些愚蠢的事情，但我无法找到答案。
Can someone help me out on this. I know its some silly thing which I am missing out here but I am not able to figure it out.
推荐答案
得到了解决。 JSON的是格式不正确。正确JOSN是：
Got the solution. The Json was not properly formatted. Correct JOSN is:
[
{
"screen": {
"view1":{
"img" : "http://placekitten.com/609/300",
"price": "Rs 100",
"href": "http://www.bootstraptor.com"
},
"view2":{
"img": "http://placekitten.com/610/300",
"price": "Rs 101",
"href":"http://www.bootstraptor.com"
},
"view3":{
"img":"http://placekitten.com/602/300",
"price": "Rs 102",
"href":"http://www.bootstraptor.com"
},
"view4":{
"img":"http://placekitten.com/603/300",
"price": "Rs 103",
"href":"http://www.bootstraptor.com"
}
}},{
"screen":{
"view1":{
"img" : "http://placekitten.com/601/300",
"price": "Rs 104",
"href": "http://www.bootstraptor.com"
},
"view2":{
"img": "http://placekitten.com/606/300",
"price": "Rs 105",
"href":"http://www.bootstraptor.com"
},
"view3":{
"img":"http://placekitten.com/607/300",
"price": "Rs 106",
"href":"http://www.bootstraptor.com"
},
"view4":{
"img":"http://placekitten.com/608/300",
"price": "Rs 107",
"href":"http://www.bootstraptor.com"
}
}
}
]
这篇关于多项目casrousel NG-RE $ P $拍拍类=＆QUOT;项目积极＆QUOT;不工作 - AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
