离子响应电网不工作电网、离子、工作

2023-09-14 00:08:08 作者：◆來罘及握手

我创建了一个离子响应电网不正常工作。网格是没有反应。因此，它是不是在不同的屏幕大小自动调节和设定没有断行，如果我增加了许多按钮或删除这些从系统的/。无论它们合并到彼此或所有的按钮是在小屏幕上下面相互一列。我怎样才能解决这个问题？

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

JSON： 7个按键

  [  {    _comment：游戏，    类型：链接，    ID：entertainmentButton    图标：离子膜标志物    名：游戏娱乐    topage：servicePage.html，    色：白色，    功能：OpenLink公司（），    控制器：OpenLinkCtrl    的backgroundColor：＃0066FF，    FONT-SIZE：26px  }，  {    _comment：标志，    类型：链接，    ID：MainPageLogo    图标：，    形象：../img/icon/logo_moenchsweiler.png    名：第二个链接，    topage：，    功能：OpenLink公司（），    控制器：OpenLinkCtrl    色：，    背景颜色： ，    字体大小：   }，  {    _comment：标志，    类型：链接，    ID：MainPageLogo    图标：，    形象：../img/icon/logo_moenchsweiler.png    名：第二个链接，    topage：，    功能：OpenLink公司（），    控制器：OpenLinkCtrl    色：，    背景颜色： ，    字体大小：   }，  {    _comment：标志，    类型：链接，    ID：MainPageLogo    图标：，    形象：../img/icon/logo_moenchsweiler.png    名：第二个链接，    topage：，    功能：OpenLink公司（），    控制器：OpenLinkCtrl    色：，    背景颜色： ，    字体大小：   }，  {    _comment：标志，    类型：链接，    ID：MainPageLogo    图标：，    形象：../img/icon/logo_moenchsweiler.png    名：第二个链接，    topage：，    功能：OpenLink公司（），    控制器：OpenLinkCtrl    色：，    背景颜色： ，    字体大小：   }，  {    _comment：标志，    类型：链接，    ID：MainPageLogo    图标：，    形象：../img/icon/logo_moenchsweiler.png    名：第二个链接，    topage：，    功能：OpenLink公司（），    控制器：OpenLinkCtrl    色：，    背景颜色： ，    字体大小：   }，  {    _comment：标志，    类型：链接，    ID：MainPageLogo    图标：，    形象：../img/icon/logo_moenchsweiler.png    名：第二个链接，    topage：，    功能：OpenLink公司（），    控制器：OpenLinkCtrl    色：，    背景颜色： ，    字体大小：   }]

JavaScript的：

  VAR对myApp = angular.module（'启动'，[]）;myApp.config（['$ sceDelegateProvider'，函数（$ sceDelegateProvider）{    $ sceDelegateProvider.resourceUrlWhitelist（[        '自'，        ''    ]）;}]）;myApp.controller（'generateHTMLCtrl'，函数（$范围，$ HTTP，$编译，$插值，$ templateCache）{    $ http.get（'myjsonfile.json'）。成功（功能（数据）{        对于（数据变种I）{            VAR插值= $插补（$ templateCache.get（「太平人寿」）修剪（）。）（数据由[i]）;            angular.element（document.querySelector（＃loadhere））追加（$编译（插值）（$范围））。        }    }）;}）;myApp.controller（OpenLinkCtrl功能（$范围）{        $ scope.OpenLink =功能（）{           警报（链接打开）;        }}）;

HTML：

 ＆LT;机身NG-应用=入门级=填充的风格=文本对齐：中心＆GT;   ＆LT; DIV CLASS =行响应-MDNG控制器=generateHTMLCtrlID =loadhere＆GT;＆LT; / DIV＆GT;   ＆LT;脚本类型=文/ NG-模板ID =太平人寿＆GT;      ＆LT; DIV CLASS =山坳＆GT;         ＆LT;风格=COLOR：{{颜色}};背景色：{{的backgroundColor}}ID ={{ID}}级={{类型}}的href ={{topage}} NG控制器={{控制器}}NG点击={{功能}}＆GT; ＆LT; I类={{图标}}＆GT;＆LT; BR＆GT;＆LT; / I＆GT; {{名}}＆LT; / A＆GT;      ＆LT; / DIV＆GT;   ＆LT; / SCRIPT＆GT;＆LT; /身体GT;

什么我需要修改HTML的code。该电网是响应？

编辑：

它应该看起来像这里的，例如：

 ＆LT; DIV CLASS =行响应-SM＆GT;            ＆LT; DIV CLASS =山坳＆GT;                ＆LT;按钮样式=WIDTH：100px的;高度：100像素＆GT;测试与LT; /按钮＆GT;                ＆LT;按钮样式=WIDTH：100px的;高度：100像素＆GT;测试与LT; /按钮＆GT;                ＆LT;按钮样式=WIDTH：100px的;高度：100像素＆GT;测试与LT; /按钮＆GT;                ＆LT;按钮样式=WIDTH：100px的;高度：100像素＆GT;测试与LT; /按钮＆GT;                ＆LT;按钮样式=WIDTH：100px的;高度：100像素＆GT;测试与LT; /按钮＆GT;                ＆LT;按钮样式=WIDTH：100px的;高度：100像素＆GT;测试与LT; /按钮＆GT;                ＆LT;按钮样式=WIDTH：100px的;高度：100像素＆GT;测试与LT; /按钮＆GT;            ＆LT; / DIV＆GT;        ＆LT; / DIV＆GT;

这code显示按钮如下：

在大屏幕尺寸：

小一点：

非常小的：

编辑：

解决方案：

 ＆LT; DIV NG控制器=generateHTMLCtrlID =loadhere＆GT;            ＆LT;脚本类型=文/ NG-模板ID =太平人寿＆GT;                ＆LT;风格=COLOR：{{颜色}};背景色：{{的backgroundColor}};                   ID ={{ID}}级={{类型}}的href ={{topage}}                   NG-控制器={{控制器}}NG点击={{功能}}＆GT;                    ＆LT; I类={{图标}}＆GT;＆LT; BR＆GT;＆LT; / I＆GT; {{名}}                ＆所述; / A＆GT;            ＆LT; / SCRIPT＆GT;        ＆LT; / DIV＆GT;

解决方案

您想要的是更多的东西是这样的：

 ＆LT; NG-IF =$指数4％0 ===＆GT DIV CLASS =行NG-重复=形象形象;        ＆LT; DIV CLASS =COL COL-25NG-IF =$指数＆LT; images.length＆GT;            ＆LT; IMG NG-SRC ={{图像[$指数]的.src}}WIDTH =100％/＆GT;        ＆LT; / DIV＆GT;        ＆LT; DIV CLASS =COL COL-25NG-IF =$指数±1℃; images.length＆GT;            ＆LT; IMG NG-SRC ={{图像[$指数+ 1]的.src}}WIDTH =100％/＆GT;        ＆LT; / DIV＆GT;        ＆LT; DIV CLASS =COL COL-25NG-IF =$指数+ 2'; images.length＆GT;            ＆LT; IMG NG-SRC ={{图像[$指数+ 2]的.src}}WIDTH =100％/＆GT;        ＆LT; / DIV＆GT;        ＆LT; DIV CLASS =COL COL-25NG-IF =$指数+ 3'; images.length＆GT;            ＆LT; IMG NG-SRC ={{图像[$指数+ 3]的.src}}WIDTH =100％/＆GT;        ＆LT; / DIV＆GT;    ＆LT; / DIV＆GT;

这将最多每行4的图像，包装和堆栈的创建。你也可以把它或多或少每个图像通过改变NG-if语句为行，然后将图像量在该行

当你提出的每个图像上，你要显示的行类，从而创建一个新的行你会pre-分配四列你行，但是你会首先检查，看它是否将永远不会填充prevent未定义异常如果图像指定索引处存在，然后将其添加到列

编辑！尝试这个添加这个CSS类：

  {名为.gallery    -webkit-FLEX-包装：包装;    柔性包装：包装;}

那么把它放进你的HTML：

 ＆LT;离子含量NG控制器=ExampleControllerNG-的init =loadImages（）级=画廊＆GT;  ＆LT;跨度NG重复=形象形象＆GT;    ＆LT; IMG SRC ={{图像}}WIDTH =150像素＆GT;  ＆LT; / SPAN＆GT;

由于离子是建立在基于柔性盒子上面，你可以在一个离子电网Flexbox的。

I created a responsive grid in Ionic which doesn't work properly. The Grid is not responsive. So it isn't automatically adjusted on different screen size and set no linebreak if I add many Buttons or delete these to the/from the system. Either they merge into each other or all the buttons are in a column below the each other on small screens. How can i solve this?

I add or delete all the buttons in a JSON-File. From there I parse the Buttons in to the system.

JSON: 7 Buttons

[
  {
    "_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>

What do I need to modify in HTMl-code that the Grid is responsive?

Edit:

It should look like here, e.g:

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

This code displays the buttons as follows:

on large screen size:

bit smaller:

very small:

Edited:

The solution:

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

解决方案

what you want is something more like this:

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

This will create a maximum of 4 images per row that wrap and stack. You can also make it more or less images per by changing ng-if statement in for rows and then the amount of images in that row

When you are on every forth image, you are going to show the row class, thus creating a new row you will pre-allocate four columns for you row, but you would first check to see if it will ever be filled to prevent an undefined exception If the image exists at the specified index, then add it to the column

Edit! Try this add this css class:

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

then put this in your html:

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

since ionic is built on built on top of flex box you can make a flexbox grid in ionic.

上一篇：如何动态地更改查看日期（这是过滤事件按日期时间）这是、日期、事件、按日

下一篇：在处理人际关系流星角人际关系、流星

相关推荐

精彩图集

精彩推荐

图片推荐

隋炀帝死后,宠妃吴绛仙最后止论怎么样?