多项目casrousel代表类＝“;项目活动”;不工作-AngularJS

Multi-item casrousel ng-repreat class="item active" Not working - AngularJS

本文关键字：项目 活动 工作 -AngularJS casrousel      更新时间：2023-09-26

我能够正确地从JSON加载数据，但不确定为什么下面的行不起作用：

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

我把它从AngularJS ng重复与引导转盘链接。我只能看到多转盘的第二个屏幕（我指的是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>

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包含下面的控制器，我可以看到"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;
});
});

有人能帮我一下吗。我知道我在这里错过了一些愚蠢的事情，但我无法弄清楚。

找到了解决方案。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"
    }
}
}
]
相关文章：