Question

我创建了一个带角度旋转木马的图库。当我从缩略图库中单击特定图像时（例如，如果我选择第4张图像），预览或弹出视图将显示图像库中的第一张图像。但它必须从图库中显示特定的所选图像（例如第4张图像），弹出视图必须显示所选图像。提前谢谢。

    @{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <title>Image Carousel</title>

    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/angular-carousel.css" rel="stylesheet" />
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <link href="~/Content/example-fixed-layout.css" rel="stylesheet" />
    <link href="~/Content/styles.css" rel="stylesheet" />
    <link href="~/Content/ladda-themeless.min.css" rel="stylesheet" />
</head>


<body ng-app="app" data-flow-prevent-drop data-flow-drag-enter="dropClass='drag-over'" data-flow-drag-leave="dropClass=''">

    <!-- Modal -->
    <h3>Image Upload</h3>
    <div ng-controller="CarouselDemoCtrl">

        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span class="sr-only">Close</span></button>
                        <h4 class="modal-title" id="myModalLabel">Image Preview</h4>
                    </div>
                    <div class="modal-body">
                        <carousel interval="myInterval">
                            <slide ng-repeat="file in images">
                                <div data-flow-init>

                                    <!-- Button trigger modal -->
                                    <img data-flow-img="file" class="carousel-inner" data-toggle="modal" style="width:500px;height:400px;">
                                </div>
                                <div>
                                    <p><b>Picture {{$index+1}} of {{images.length}}</b></p>
                                </div>
                            </slide>
                        </carousel>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="wrapper">
            <div data-flow-init data-flow-files-submitted="$flow.upload()" data-flow-file-added="!!{png:1,gif:1,jpg:1,jpeg:1}[$file.getExtension()]">
                <div class="drop" data-flow-drop ng-class="dropClass">
                    <span class="btn btn-primary ladda-button" data-style="expand-left" data-flow-btn><span class="ladda-label">Upload Image</span></span>
                </div>

                <br />
                <div style="border: solid gray 1px; width: 220px; height: 195px; cursor: pointer;">
                    <carousel interval="myInterval">
                        <slide active="slide.active" ng-repeat="file in $flow.files">
                            <div>
                                <img data-flow-img="file" class="carousel-inner" data-toggle="modal" data-max-size="10kb" data-ng-click="openLargeImage($flow.files,$index)" style=" width:220px;height:165px;">
                            </div>
                            <div style="width:220px; height:25px;">
                                <span style="position:absolute; width:220px; height:25px;right:50px;"> <b>Picture: {{$index+1}} of {{$flow.files.length}}</b></span>
                                <span style="position:absolute;width:220px; height:25px;left:80px"> <a class="btn btn-xs btn-danger" ng-click="file.cancel()"> Remove </a></span>
                            </div>
                        </slide>
                    </carousel>
                </div>

            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.13/angular.min.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/angular-carousel.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular-touch.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="~/Scripts/flow.js"></script>
    <script src="~/Scripts/fusty-flow.js"></script>
    <script src="~/Scripts/fusty-flow-factory.js"></script>
    <script src="~/Scripts/ng-flow.js"></script>
    <script src="~/Scripts/showImageLoader.js"></script>
    <script src="~/Scripts/ladda.min.js"></script>
    <script src="~/Scripts/spin.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('app', ['ui.bootstrap', 'flow']);
        app.config(['flowFactoryProvider', function (flowFactoryProvider) {
            flowFactoryProvider.defaults = {
                target: '',
                permanentErrors: [500, 501],
                maxChunkRetries: 1,
                chunkRetryInterval: 5000,
                simultaneousUploads: 1
            };
            flowFactoryProvider.on('fileAdded', function (file, event) {
                console.log(file, event);
            });

            flowFactoryProvider.on('catchAll', function (event) {
                console.log('catchAll', arguments);
            });

            // Can be used with different implementations of Flow.js
            flowFactoryProvider.factory = fustyFlowFactory;
        }]);

        app.controller('CarouselDemoCtrl', function ($scope) {


            $scope.$on('test', function (event, result) {
                alert(result);
                event.preventDefault();//prevent file from uploading
            });

            $scope.up = function () {

            };

            $scope.openLargeImage = function (files, index) {
                $scope.images = files;
                $scope.index = index;
                $('#myModal').modal($scope)
            };

        });
    </script>
</body>
</html>

Answer 1

如果您的模态仅用于显示img，请按照这样做

data-ng-click="openLargeImage(file)"

你的JS中的

$scope.openLargeImage = function (file) {
          $scope.img = file.image;
          $('#myModal').modal();
        };

你的模态中的

<img ng-src="{{img}}" />

它没有经过测试，但这是最简单的方法

在angularJS中预览图像库轮播的问题

1 个答案: