Question

当我点击左箭头时，我正试图隐藏3辆自行车，以便我可以从app.js产品对象转换到下一辆3辆自行车。我尝试了ng-hide，但是它会让它们消失，导致两个箭头相互碰撞，如下面的截图所示。如果我隐藏不透明度，它们将保持原样，然后我可以在看不见时更改图像。任何人都可以帮我这个吗？

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>&nbsp;{{"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>
                <!-- you missed md from offset, end class not needed -->
                <div class="products" ng-controller="BikeController">
                  <div class="row">
             <div ng-repeat="product in products | limitTo:-3">
     <div class="col-md-1" id="leftArrow" ng-click="leftArrowClick($index)"><a ng-href="#"><img ng-src="images/leftarrow.png" class="img-responsive"></a></div>
<div class="bikesandtitles"> 

                  <div id="bikeTitle" class="col-md-3 text-center" ng-style="{ 'translucent': $index !== selectedIndex }">
                  {{product.manufacturer}}
                  <img id="bikePic" ng-src="{{product.image}}" ng-style="{ 'translucent': $index !== selectedIndex }">
                  </div>
                       </div>
                       </div><!-- end ng-repeat products -->
                   <div class="col-md-1" id="rightArrow"><a ng-href="#" ><img ng-src="images/rightarrow.png" class="img-responsive"></a></div>



</div>
                </div><!--End controller-->




    </div>



    <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', ['ngAnimate']);
app.controller('BikeController',['$scope', function($scope){
$scope.bikeSlide = false;
$scope.leftArrowClick = function(index){

  $scope.selectedIndex = index;

};

$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'
}
];


this.form = {};
this.addForm = function(product){

};

}]);

app.css

.header{
    font-style:italic;
background-color:black;
height:60px;
color:white;
font-weight:bold;
font-size:40px;


}
.header .fa {font-style:italic;
}
.bikeSelector{
color:green;
}
.chooseTitle{

font-size:60px;

}

.products{
color:  #1E90FF  ;
text-align:center;
font-size:40px;

}
#bikePic{

height:100%;
width:100%;

}
#leftArrow, #rightArrow{
width:120px;

}


.translucent {
    opacity: 0.5
}

Answer 1

您可以使用visibility:hidden暂时隐藏内容。像这样

<div ng-class="{ hidden: isTransitioning }" ..>...</div>

.hidden {
    visibility: hidden;
}

在你可以放置的箭头的onClick处理程序中。

scope.isTransitioning = true;

转换完成后，您可以重置值

scope.isTransitioning = false;

Answer 2

ng-style或ng-class可能会对您有所帮助：

<div ng-style="{ 'translucent': $index !== selectedIndex }" ..>...</div>

.translucent {
    opacity: 0.5
}

In function:
$scope.leftArrowClick = function (index){
    $scope.selectedIndex = index;
}

用角度隐藏内容的不透明度

2 个答案: