离子幻灯片框：多张幻灯片的一种形式不起作用答案

【问题标题】：Ionic Slide box : one form for multiple slides not working离子幻灯片框：多张幻灯片的一种形式不起作用
【发布时间】：2017-04-28 00:01:00
【问题描述】：

我正在使用 ion-slide-box，我遇到的问题是当我为整个滑块设置一个单一表单时，滑块似乎不再工作了。我最终得到一个视图，没有更多幻灯片。

这是我的简单代码：

<form><ion-slide-box>
<ion-slide>Slide 1</ion-slide>
<ion-slide>Slide 2</ion-slide>
<ion-slide>Slide 3</ion-slide></ion-slide-box></form>

请谁能告诉我应该怎么做才能为我的所有幻灯片设置一个表单，谢谢。

【问题讨论】：

标签： angularjs forms ionic-framework ion-slide-box

【解决方案1】：

请参阅下面的示例，了解如何在表单内创建滑块

angular.module('demoApp', ['ionic'])
    .controller('DemoCtrl', function($scope, $ionicSlideBoxDelegate) {

        $scope.images = [
            "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSeuNVzlDcFunjMxXa3_ui65_fJgwvT8Eq0M5GluaIbl5DJYLOaCI0McDw",
            "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTg_tgzzbgiZ9QnAe8-xtbnBe04jJ7Ke7s60llFYcwhiZqFQO1BQ6mqdh0W",
            "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQamBcgUQKpzafi4MNW6WYnS6wxvJCiQjKc_uoAz4ycmyHO2qvV0q4sCazG",
            "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSqXQBbyRukbsao9ljVsi8SMW7GWVlXl2By4jS7QiqFNr3ChFf9Lw",
            "https://ga-core.s3.amazonaws.com/production/uploads/program/default_image/2034/Angularjs-Bootcamp-LONDON.jpg",
        ]

        $scope.slideVisible = function(index) {
            if (index < $ionicSlideBoxDelegate.currentIndex() - 1 ||
                index > $ionicSlideBoxDelegate.currentIndex() + 1) {
                return false;
            }

            return true;
        }

    });

.scrollCanvas {
    width: 250px;
    height: 250px;
}
.image {
    width: 100%;
    height: 200px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center, center;
}
#frm {
    width: 250px;
    height: 260px;
    border: 2px solid red;
    margin: 0 auto;
}

<html ng-app="demoApp">

<head>
    <meta charset="utf-8">
    <title>
        Zoomable images
    </title>

    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href="//code.ionicframework.com/1.0.0-beta.13/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/1.0.0-beta.13/js/ionic.bundle.js"></script>
</head>

<body class="padding" ng-controller="DemoCtrl">
    <ion-content>
        <form id="frm">
            <ion-slide-box>

                <ion-slide ng-repeat="image in images">
                    <div class="container" ng-if="slideVisible($index)" class="scrollCanvas">
                        <ion-scroll class="scrollCanvas" zooming="true" min-zoom="1" direction="xy" locked="false">
                            <div class="image" style="background-image: url( {{image}} )"></div>
                        </ion-scroll>
                    </div>
                    <div>&nbsp;</div>
                </ion-slide>

            </ion-slide-box>
        </form>

    </ion-content>

</body>

</html>

【讨论】：

非常感谢，我使用了您的示例，它对我有用。