离子幻灯片盒：一种形式的多个幻灯片不起作用

Question

I'am working with ion-slide-box, the problem i have is when i set the one single form for the whole slider, the slider doesn't seem to be working again. 我正在使用离子滑盒，但我遇到的问题是，当我为整个滑块设置一个表格时，滑块似乎不再起作用。 I end up with one view and no more slides. 我最终得到一个视图，没有更多的幻灯片。

here is my simple code : 这是我的简单代码：

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

Please can anyone tell me what should I do to set one form for all my slides, thanks. 有人可以告诉我如何为所有幻灯片设置一种表格，谢谢。

Answer 1

see below sample to how to create slider inside form 参见下面的示例，了解如何在表单内部创建滑块

 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>

离子幻灯片盒：一种形式的多个幻灯片不起作用

问题描述

1 个解决方案

解决方案1
0 2017-04-28 04:29:18

离子幻灯片盒：一种形式的多个幻灯片不起作用

问题描述

1 个解决方案

解决方案1 0 2017-04-28 04:29:18

解决方案1
0 2017-04-28 04:29:18