Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to arrange items in grid dynamically
    primarykey
    data
    text
    <p>I am creating a webpage dynamically from on a json script. Here is my JSON script.</p> <pre><code>pageitems = [ { isArray:false, type : 'text', label : 'Search here', grid : 'grid2' }, { isArray : true, elements : [ {'label' : 'Btn1', type : 'button'}, {'label' : 'Btn2', type : 'button'}, {'label' : 'Btn3', type : 'button'} ], grid : 'grid8' } ] </code></pre> <p>So I want to get the actual html script for the display. I have 3-grids in single row. so the first search-box from the json should be arranged in 2nd grid of first row. and the buttons should be arranged in 2nd grid of 3rd row. How can I do this. I am using angularjs anyway.</p> <p>I am using something like this, but its not getting arranged in grid.</p> <pre><code>&lt;div ng-controller='someCtrl'&gt; &lt;div ng-repeat='pageitem in pageitems'&gt; &lt;div ng-show='pageitem.isArray'&gt; &lt;div ng-switch='pageitem.grid'&gt; &lt;div class='span3' ng-switch-when='1'&gt; &lt;div ng-repeat='element in pageitem.elements'&gt; &lt;input type='{{element.type}}' value='{{element.label}}'&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class='span3' ng-switch-when='2'&gt; &lt;div ng-repeat='element in pageitem.elements'&gt; &lt;input type='{{element.type}}' value='{{element.label}}'&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class='span3' ng-switch-when='3'&gt; &lt;div ng-repeat='element in pageitem.elements'&gt; &lt;input type='{{element.type}}' value='{{element.label}}'&gt; &lt;/div&gt; &lt;/div&gt; &lt;! ---- and continues ----&gt; &lt;/div&gt; &lt;/div&gt; &lt;div ng-hide='pageitem.isArray'&gt; &lt;input type='{{element.type}}' value='{{element.label}}'&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload