0
3つのイメージを隣り合わせに表示することに問題があります。最初の3枚の画像を出力するのにng-repeatを使用していますが、グリッドのcol-mdサイズをどのように混乱させても、それらは互いに重なり合っています。お互いの隣に画像を取得する方法に関する提案。ブートストラップグリッドの上にイメージを置く
HTML
<!DOCTYPE html>
<html ng-app='formApp'>
<head>
<title>Bicycle App</title>
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link href="app.css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="container">
<div class='row'>
<div class='col-md-12'>
<i class="fa fa-bicycle" aria-hidden="true"><span> {{"Bike Shop"}}</span></i>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<!-- end class not needed -->
<div class="chooseTitle">
Choose Your Bicycle
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<!-- you missed md from offset, end class not needed -->
<div class="products" ng-controller="BikeController">
<div ng-repeat ="product in products | limitTo: -3">
{{product.manufacturer}}
<img class="img-responsive" ng-src="{{product.image}}" ></div>
</div><!--End controller-->
</div><!--end col-md-3-->
</div><!--end row-->
</div> <!--end container-->
<script src="bower_components/angular/angular.js"></script>
<script src="app.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bikeimageslider.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
</body>
</html>
app.js
var app = angular.module('formApp', []);
app.controller('BikeController',['$scope', function($scope){
$scope.products = [
{
manufacturer: "Trek",
image: 'images/bike1.jpg'
},
{
manufacturer: "Mongoose",
image: 'images/bike2.jpg'
},
{
manufacturer: "Portlandia",
image: 'images/bike3.jpg'
},
{
manufacturer: "Giant",
image: 'images/bike4.jpg'
},
{
manufacturer: "Framed",
image: 'images/bike5.jpg'
},
{
manufacturer: "Windsor",
image: 'images/bike6.jpg'
}
];
/*
$scope.LeftArrowClick =function(selectedIndex){
if (products[selectedIndex] = products[-1]){
products[selectedIndex] = products[6];
}
};
$scope.increment =0;
$scope.RightArrowClick =function(selectedIndex){
$scope.selectedIndex++;
$scope.selectedObject = $scope.products[selectedIndex];
if ($scope.products === 7){
$scope.products = 0;
}
};
*/
}]);
ありがとうございました！それは素晴らしい仕事でした。私はこれを参考に将来のために使用する予定です – user6680