Как отобразить подпись под изображением в угловой карусели jk - PullRequest
0 голосов
/ 09 октября 2018

Я работаю над угловой каруселью 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 Controller

$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>

Вывод вышеприведенного кода: Выстрел имени рядомвторое изображение также рядом с третьим изображением

...