Question

我可以正确加载JSON中的数据，但不确定为什么下面的行无效：

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

我是从AngularJS ng-repeat with bootstrap carousel链接获取的。我只能看到多轮播的第二个屏幕（我的意思是只有JSON的第二个对象）.Below是我的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>

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

kitty.js包含以下控制器，我可以看到＆＃34;宾果＆＃34; 作为警报：

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;
});
});

有人可以帮我解决这个问题。我知道我在这里错过了一些愚蠢的事情，但我无法弄明白。

Answer 1

得到了解决方案。 Json格式不正确。正确的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 =＆＃34; item active＆＃34;不工作 - AngularJS

1 个答案: