Question

我在Ionic中创建了一个无法正常工作的响应式网格。网格没有响应。因此，如果我添加许多按钮或将这些按钮删除到系统中，则不会在不同的屏幕尺寸上自动调整并且不设置换行符。它们要么彼此合并，要么所有按钮都在小屏幕上彼此相邻的列中。我该如何解决这个问题？

我添加或删除JSON文件中的所有按钮。从那里我将Buttons解析到系统中。

JSON： 7个按钮

ContentTemplate

JavaScript的：

[
  {
    "_comment": "Games",
    "type": "button",
    "id": "entertainmentButton",
    "icon": "ion-film-marker",
    "name": "Game and entertainment",
    "topage": "servicePage.html",
    "color": "white",
    "function": "OpenLink()",
    "controller": "OpenLinkCtrl",
    "backgroundcolor": "#0066FF",
    "font-size": "26px"
  },
  {
    "_comment": "Logo",
    "type": "button",
    "id": "MainPageLogo",
    "icon": "",
    "image": "../img/icon/logo_moenchsweiler.png",
    "name": "second link",
    "topage": "",
    "function": "OpenLink()",
    "controller": "OpenLinkCtrl",
    "color": "",
    "backgroundcolor": "",
    "font-size": ""
  },
  {
    "_comment": "Logo",
    "type": "button",
    "id": "MainPageLogo",
    "icon": "",
    "image": "../img/icon/logo_moenchsweiler.png",
    "name": "second link",
    "topage": "",
    "function": "OpenLink()",
    "controller": "OpenLinkCtrl",
    "color": "",
    "backgroundcolor": "",
    "font-size": ""
  },
  {
    "_comment": "Logo",
    "type": "button",
    "id": "MainPageLogo",
    "icon": "",
    "image": "../img/icon/logo_moenchsweiler.png",
    "name": "second link",
    "topage": "",
    "function": "OpenLink()",
    "controller": "OpenLinkCtrl",
    "color": "",
    "backgroundcolor": "",
    "font-size": ""
  },
  {
    "_comment": "Logo",
    "type": "button",
    "id": "MainPageLogo",
    "icon": "",
    "image": "../img/icon/logo_moenchsweiler.png",
    "name": "second link",
    "topage": "",
    "function": "OpenLink()",
    "controller": "OpenLinkCtrl",
    "color": "",
    "backgroundcolor": "",
    "font-size": ""
  },
  {
    "_comment": "Logo",
    "type": "button",
    "id": "MainPageLogo",
    "icon": "",
    "image": "../img/icon/logo_moenchsweiler.png",
    "name": "second link",
    "topage": "",
    "function": "OpenLink()",
    "controller": "OpenLinkCtrl",
    "color": "",
    "backgroundcolor": "",
    "font-size": ""
  },
  {
    "_comment": "Logo",
    "type": "button",
    "id": "MainPageLogo",
    "icon": "",
    "image": "../img/icon/logo_moenchsweiler.png",
    "name": "second link",
    "topage": "",
    "function": "OpenLink()",
    "controller": "OpenLinkCtrl",
    "color": "",
    "backgroundcolor": "",
    "font-size": ""
  }
]

HTML：

var myApp = angular.module('starter', []);
myApp.config(['$sceDelegateProvider', function($sceDelegateProvider) {
    $sceDelegateProvider.resourceUrlWhitelist([
        'self',
        ''
    ]);
}]);

myApp.controller('generateHTMLCtrl', function ($scope, $http, $compile, $interpolate, $templateCache) {    
    $http.get('myjsonfile.json').success(function (data) {      
        for(var i in data){            
            var interpolated = $interpolate($templateCache.get("tpl").trim())(data[i]);            
            angular.element(document.querySelector("#loadhere")).append($compile(interpolated)($scope));            
        }               
    });
});

myApp.controller("OpenLinkCtrl", function ($scope) {    
        $scope.OpenLink = function () {
           alert("Link open");
        }    
});

我需要在网格响应的HTMl代码中修改什么？

修改

它应该在这里，例如：

    <body ng-app="starter" class="padding" style="text-align: center">
   <div class="row responsive-md" ng-controller="generateHTMLCtrl" id="loadhere"></div>
   <script type="text/ng-template" id="tpl">
      <div class="col">
         <a style="color:{{color}}; background-color:{{backgroundcolor}} " id="{{id}}" class="{{type}}" href="{{topage}}" ng-controller="{{controller}}" ng-click="{{function}}"> <i class="{{icon}}"><br></i>{{name}}</a>
      </div>
   </script>
</body>

此代码显示如下按钮：

大屏幕尺寸：

小一点：

非常小：

编辑：

解决方案：

<div class="row responsive-sm">
            <div class="col">
                <button style="width: 100px; height: 100px">Test</button>
                <button style="width: 100px; height: 100px">Test</button>
                <button style="width: 100px; height: 100px">Test</button>
                <button style="width: 100px; height: 100px">Test</button>
                <button style="width: 100px; height: 100px">Test</button>
                <button style="width: 100px; height: 100px">Test</button>
                <button style="width: 100px; height: 100px">Test</button>
            </div>
        </div>

Answer 1

你想要的是更像这样的东西：

<div class="row" ng-repeat="image in images" ng-if="$index % 4 === 0">
        <div class="col col-25" ng-if="$index < images.length">
            <img ng-src="{{images[$index].src}}" width="100%" />
        </div>
        <div class="col col-25" ng-if="$index + 1 < images.length">
            <img ng-src="{{images[$index + 1].src}}" width="100%" />
        </div>
        <div class="col col-25" ng-if="$index + 2 < images.length">
            <img ng-src="{{images[$index + 2].src}}" width="100%" />
        </div>
        <div class="col col-25" ng-if="$index + 3 < images.length">
            <img ng-src="{{images[$index + 3].src}}" width="100%" />
        </div>
    </div>

这将为每行创建最多4个图像进行换行和堆叠。您还可以通过更改行中的ng-if语句，然后更改该行中的图像数量来实现更多或更少的图像

当您在每个第四张图像上时，您将显示行类，从而创建一个新行您将为您的行预先分配四列，但您首先要检查它是否会被填充以防止出现未定义的异常如果图像存在于指定的索引处，则将其添加到列

编辑！试试这个添加这个css类：

.gallery {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

然后把它放在你的HTML中：

<ion-content ng-controller="ExampleController" ng-init="loadImages()" class="gallery">
  <span ng-repeat="image in images">
    <img src="{{image}}" width="150px">
  </span>

因为离子是建立在柔性盒顶部的，所以你可以制作一个离散的柔性盒网格。

离子响应网格不起作用

1 个答案: