【发布时间】：2015-08-19 08:06:24
【问题描述】：
我在 Ionic 中创建了一个无法正常工作的响应式网格。网格没有响应。因此，如果我添加许多按钮或从系统中删除这些按钮，它不会在不同的屏幕尺寸上自动调整并且不会设置换行符。它们要么相互合并，要么所有按钮都在小屏幕上彼此下方的列中。我该如何解决这个问题？
我添加或删除 JSON 文件中的所有按钮。从那里我将按钮解析到系统中。
JSON： 7 个按钮
[
{
"_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": ""
}
]
JavaScript：
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>
我需要在 HTMl 代码中修改哪些 Grid 是响应式的？
编辑：
它应该看起来像这里，例如：
<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>
此代码显示按钮如下：
在大屏幕上：
小一点：
非常小：
已编辑：
解决办法：
<div ng-controller="generateHTMLCtrl" id="loadhere">
<script type="text/ng-template" id="tpl">
<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>
</script>
</div>
【问题讨论】：
标签： angularjs responsive-design ionic-framework ionic