StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<h2>Edit Nov 12, 2013</h2> <p>It seems that not only did angular change a little in 1.2, but that there is an even better method. I've created two filters. I tried to combine them into one but got digest errors. Here are the two filters:</p> <pre><code>.filter("mySecondFilter", function(){ return function(input, row, numColumns){ var returnArray = []; for(var x = row * numColumns; x < row * numColumns + numColumns; x++){ if(x < input.length){ returnArray.push(input[x]); } else{ returnArray.push(""); //this is used for the empty cells } } return returnArray; } }) .filter("myFilter", function(){ return function(input, numColumns){ var filtered = []; for(var x = 0; x < input.length; x++){ if(x % numColumns === 0){ filtered.push(filtered.length); } } return filtered; } }); </code></pre> <p>And now the html will look like this:</p> <pre><code><table border="1"> <tr data-ng-repeat="rows in (objects | myFilter:numColumns)"> <td data-ng-repeat="column in (objects | mySecondFilter:rows:numColumns)">{{ column.entry }}</td> </tr> </table> </code></pre> <p><strong>jsFiddle</strong>: <a href="http://jsfiddle.net/W39Q2/" rel="noreferrer">http://jsfiddle.net/W39Q2/</a></p> <hr> <p><strong>Edit Sept 20, 2013</strong></p> <p>While working with lots of data that needed dynamic columns I've come up with a better method.</p> <p>HTML: </p> <pre><code><table border="1"> <tr data-ng-repeat="object in (objects | myFilter:numColumns.length)"> <td data-ng-repeat="column in numColumns">{{ objects[$parent.$index * numColumns.length + $index].entry }}</td> </tr> </table> </code></pre> <p>Javascript:</p> <pre><code>$scope.objects = [ ]; for(var x = 65; x < 91; x++){ $scope.objects.push({ entry: String.fromCharCode(x) }); } $scope.numColumns = []; $scope.numColumns.length = 3; </code></pre> <p>New Filter:</p> <pre><code>.filter("myFilter", function(){ return function(input, columns){ var filtered = []; for(var x = 0; x < input.length; x+= columns){ filtered.push(input[x]); } return filtered; } }); </code></pre> <p>This allows it to be dynamic. To change the columns just change the numColumns.length. In the js fiddle you can see I've wired it up to a dropdown.</p> <p><strong>jsFiddle</strong>: <a href="http://jsfiddle.net/j4MPK/" rel="noreferrer">http://jsfiddle.net/j4MPK/</a></p> <hr> <p>Your html markup would look like this:</p> <pre><code><div data-ng-repeat="row in rows"> <div data-ng-repeat="col in row.col">{{col}}</div> </div> </code></pre> <p>And then you could make a variable in your controller like so:</p> <pre><code>$scope.rows = [ {col: [ 1,2,3,4 ]}, {col: [ 5,6,7 ]}, {col: [ 9,10,11,12 ]} ]; </code></pre> <p>This way, you can have any number of columns you want.</p> <p><strong>jsfiddle</strong> <a href="http://jsfiddle.net/rtCP3/39/" rel="noreferrer">http://jsfiddle.net/rtCP3/39/</a></p> <hr> <p><strong>Edit</strong> I've modified the fiddle to now support having a flat array of objects:</p> <p><strong>jsfiddle:</strong> <a href="http://jsfiddle.net/rtCP3/41/" rel="noreferrer">http://jsfiddle.net/rtCP3/41/</a></p> <p>The html now looks like this:</p> <pre><code><div class="row" data-ng-repeat="row in rows"> <div class="col" data-ng-repeat="col in cols"> {{objects[$parent.$index * numColumns + $index].entry}} </div> </div> </code></pre> <p>And then in the controller i have: </p> <pre><code>$scope.objects = [ {entry: 'a'}, {entry: 'b'}, {entry: 'c'}, {entry: 'd'}, {entry: 'e'}, {entry: 'f'}, {entry: 'g'}, {entry: 'h'} ]; $scope.numColumns = 3; $scope.rows = []; $scope.rows.length = Math.ceil($scope.objects.length / $scope.numColumns); $scope.cols = []; $scope.cols.length = $scope.numColumns; </code></pre> <p>The $scope.numColumns variable is used to specify how many columns you want in each row.</p> <hr> <p>To handle dynamic array size changes, put a watch on the length of the array (not the whole array, that would be redundent)</p> <pre><code>$scope.numColumns = 3; $scope.rows = []; $scope.cols = []; $scope.$watch("objects.length", function(){ $scope.rows.length = Math.ceil($scope.objects.length / $scope.numColumns); $scope.cols.length = $scope.numColumns; }); </code></pre> <p><strong>jsfiddle</strong>: <a href="http://jsfiddle.net/rtCP3/45/" rel="noreferrer">http://jsfiddle.net/rtCP3/45/</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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