Question

我正在处理有角度的Jk轮播，它在其中显示来自数据库的iamges列表。现在工作正常，我需要在同一张表中提取名称并将其显示在图像下方。请帮我解决一下这个。我已经尝试过提供图片描述类，但是没有用。

这是item-template.html

<div>
    <img ng-src="{{slideItem.path}}">
</div>

这是HTML

     <div class="row">
                <div class="item form-group">
                    <div class="col-md-11">
                        <md-card layout="column" layout-align="center center" style="padding-bottom: 10px">
                            <jk-carousel 
                            data="carousel.vehicleImageList" 
                            current-index="carousel.currentIndex"
                            item-template-url="carousel.templateUrl" 
                            max-width="800"
                            max-height="500">
                            </jk-carousel>
                            <br>
                            <div class="container">
                                <center><button type="button" class="btn btn-primary btn-round btn-success" title="Select this vehicle" ng-click="sendID(carousel.currentIndex)">Select</button></center>
                             </div>
                           </md-card>
                        </div>
                    </div>
                </div>

JS控制器

$scope.getVehicleImages = function () {
        var src = $scope.source;
        var wgt = $scope.weight;
        $scope.carousel = {
            dataArray: [
                customerService.one('franchisevehicleimage/' + src + '/' + wgt).get().then(function (response) {
                    $scope.carousel.vehicleImageList = response.data;
                }, function error(failure) {
                    $scope.vehicleImageList = {};
                    alertService.showAlert({
                        title: 'Failure',
                        message: failure.data.message
                    });
                })
                        ],

            max_width: 800,
            max_height: 500,
            templateUrl: './src/customer/bookNow/item-template.html',
            currentIndex: 0,
        };
    }

更新：我尝试在item-template.html中使用以下代码，将所有名称都放在同一位置。

<div>
    <img ng-src="{{slideItem.path}}">   
    <div class="carousel-caption">
        <h4>{{slideItem.name}}</h4>
      </div>
</div>

以上代码的输出： Shoing the name near second image also near third image

如何在角度JK轮播中的图像下方显示图像标题

0 个答案: