多项目casrousel ng-repreat class =“有效项目”不起作用-AngularJS

Question

I am able to load the data from JSON properly but not sure why below line is not working: 我能够从JSON正确加载数据，但不确定为什么下面的行不起作用：

<div class="item" ng-class="{active:!$index}" ng-repeat="mCarousel in mCarousels">

I took it from AngularJS ng-repeat with bootstrap carousel link. 我从带有引导轮播链接的AngularJS ng-repeat中获取了它。 I can see only the second screen of multi carousel (I mean only 2nd objects of JSON).Below is my html code. 我只能看到多轮播的第二个屏幕（我的意思是只有JSON的第二个对象）。下面是我的html代码。

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

The JSON file has following data:- JSON文件包含以下数据：-

{
"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"
    }
  }
}

The kitty.js contains below controller and I can see "Bingo" as an alert: kitty.js包含下面的控制器，我可以看到“ Bingo”作为警报：

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. 我知道这是我很想念的一些愚蠢的事情，但我无法弄清楚。

Answer 1

Got the solution. 得到了解决方案。 The Json was not properly formatted. Json格式不正确。 Correct JOSN is: 正确的JOSN是：

[
{
"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-repreat class =“有效项目”不起作用-AngularJS

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-06-30 03:45:32

多项目casrousel ng-repreat class =“有效项目”不起作用-AngularJS

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-06-30 03:45:32

解决方案1
0 已采纳 2015-06-30 03:45:32