Menu
I'm trying to insert data from a model into a template but I want to add a new table row after every 7 repetitions. With strign-based templates I could do it quite easily using the iteration index and modulo but I can't quite figure out how to do this using angular's DOM templates.
Here's the HTML:
<div ng-controller="MyCtrl"> <table cellspacing="0" cellpadding="0"> <colgroup span="7"></colgroup> <tbody> <tr class="days"> <th scope="col" title="Monday">Mon</th> <th scope="col" title="Tuesday">Tue</th> <th scope="col" title="Wednesday">Wed</th> <th scope="col" title="Thursday">Thu</th> <th scope="col" title="Friday">Fri</th> <th scope="col" title="Saturday">Sat</th> <th scope="col" title="Sunday">Sun</th> </tr> <tr> <td ng-repeat="date in dates"> {{ date }} <!-- After seven iterations a new `<tr>` should be aded --> </td> </tr> </tbody> </table> </div> And the javascript it something like:
myApp = this.angular.module('myApp', []); var monthDays = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 1516, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31]; myApp.controller('MyCtrl', function($scope) { return $scope.dates = monthDays; }); You can view the code in a JSFiddle here: http://jsfiddle.net/3zhbB/2/
571
Definition and UsageThe ng-repeat directive repeats a set of HTML, a given number of times. The set of HTML will be repeated once per item in a collection. The collection must be an array or an object. Note: Each instance of the repetition is given its own scope, which consist of the current item.
The ng-repeat-start directive works the same as ng-repeat, but will repeat all the HTML code (including the tag it's defined on) up to and including the ending HTML tag where ng-repeat-end is placed.
Note: The $index variable is used to get the Index of the Row created by ng-repeat directive. Each row of the HTML Table consists of a Button which has been assigned ng-click directive. The $index variable is passed as parameter to the GetRowIndex function.
ng-repeat created inherited child scope for each element of collection, while *ngFor creates local variable in the that block.
Make $scope.dates an array of arrays with the days.
Each array inside of it is a row, and each day inside of the row's array is a day
See this updated JSFiddle http://jsfiddle.net/6aqtj/1/
72
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
