动态滑块宽度 css 问题答案

【问题标题】：Dynamic slidbox width css issue动态滑块宽度 css 问题
【发布时间】：2015-10-14 01:40:01
【问题描述】：

我有一个离子应用程序，我需要在其中动态创建一个离子滑块。每个离子载玻片最多只能有 5 个项目。接下来的 5 个项目被添加到下一个离子载玻片。我对实现这一目标感到有些困惑。我认为这一切都可以通过 CSS 完成，但我并不擅长。当我的数组仅包含 5 个项目时，它工作正常。如果它包含 10 个，那么所有的都被压缩在一起。

这是我尝试过的：

HTML：

    <!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/1.0.0-beta.11/css/ionic.min.css">
  <script src="http://code.ionicframework.com/1.0.0-beta.11/js/ionic.bundle.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app='todo'>

  <ion-pane>
    <ion-content ng-controller="MyCtrl">
      <div class="button-bar" style="border: 2px solid #00aec9;">
        <ion-slide-box show-pager="false" does-continue="true" ng-repeat="mod in modules">
          <ion-slide>
            <div ng-repeat="item in mod.details" class="footer-bar" align="center">
              {{item.name}}
            </div>
          </ion-slide>
        </ion-slide-box>
      </div>
    </ion-content>
  </ion-pane>

</body>

</html>

angular.module('todo', ['ionic'])

.controller('MyCtrl', function($scope) {

  $scope.modules = [{
    details: [{
      name: "name 1"

    }, {
      name: "name 2"
    }, {
      name: "name 3"
    }, {
      name: "name 4"
    }, {
      name: "name 5"
    }]
  }, {
    details: [{
      name: "1.1"

    }, {
      name: "2.2"
    }, {
      name: "3.3"
    }, {
      name: "4.4"
    }, {
      name: "5.5"
    }]
  }];
});

CSS

.slider-slide
{
    width:300px;
    border: 1px solid red;
}

Plunker

http://plnkr.co/TILgeHZ4hkHHghn8GvbB

【问题讨论】：

标签： javascript html css angularjs ionic-framework

【解决方案1】：

试试 style="float:left"

<ion-content ng-controller="MyCtrl">
    <div class="button-bar" style="border: 2px solid #00aec9;">
        <ion-slide-box show-pager="false" does-continue="true">
            <ion-slide ng-repeat="mod in modules" style="float:left">
                <div ng-repeat="item in mod.details" class="footer-bar" align="center">
                    {{item.name}}
                </div>
            </ion-slide>
        </ion-slide-box>
    </div>
</ion-content>

【讨论】：

如何为每 5 个项目创建一个新的离子载玻片？它只创建一张包含 5 个项目的幻灯片。我需要能够生成多张幻灯片，每张幻灯片有 5 个项目。看看我的笨蛋。
一一换行？？
ion-slide 在 any 循环之外。要创建一个新的离子载玻片，它应该在里面，对吧？
如果你在 ion-slide 中使用 ng-repeat，它会创建一张幻灯片到另一张幻灯片
好的。但是按照您的逻辑，它仍然只生成一张幻灯片。