Luke, Thanks so much for the response. It looks like the core of your idea is to build the table in the directive. I had a similar approach where I basically built the table entries in a JavaScript array of arrays, then had a simple <tr ng-repeat><td ng-repeat>... sort of thing to display it. If one of the entries had HTML elements in it, they wouldn't render, which I gather is a very reasonable security precaution; but it looks like this approach circumvents that nicely.
Thanks for unsticking me! Bartholomew On Thu, May 14, 2015 at 12:34 AM Luke Kende <[email protected]> wrote: > First of all, I'd work on one directive concept at a time and then build > up to complexity as appropriate. Your ng-repeat does not have to be outside > the directive but can be in the directive's template, and instead pass in > the data to the table's directive. You can then have custom directives in > them template of your custom directives. > > <table special-table="all_data_rows" group-by="{{colour}}"></table> > > //this is quick typed to show idea not to be accurate javascript > .directive('specialTable', function(){ > return { > scope: { > rows: '=specialTable', > groupBy: '@' > }, > template: '<thead><tr><th ng-repeat="header in > headers">{{header}}</th></tr></thead><tbody><tr ng-repeat="(group, row) in > rows"><td ng-repeat="(key, value) in row" > ng-attr-rowspan="{{row.count}}">{{value}}</td></tr></tbody>', > link: function(scope, element, attrs) { > > //using underscore.js to simplify data manipulation > scope.headers = _.keys(scope.rows[0]); > > //group items by colour or whatever you passed in > var grouped = _.groupBy(scope.rows, scope.groupBy); > > } > } > }) > > This is not a finished example, but just giving you the approach I would > take to see if that gets you thinking. > > > > On Wednesday, May 13, 2015 at 6:50:10 PM UTC-6, Bartholomew Furrow wrote: >> >> I'd like to use Angular directives to automatically build nice tables for >> me, and I'm having trouble. >> >> I have a bunch of JS objects like this one: >> {product: 'ProdA', >> colour: 'Black', >> team: 'U16B', >> count: 5}. >> >> Here's what I want the table to look like: >> >> Team | Product | Count >> ---------------------- >> U14B | ProdA | 20 >> |---------+------ >> | ProdB | 20 >> |---------+------ >> | ProdC | 20 >> -----+---------+------ >> U14G | ProdA | 19 >> |---------+------ >> | ProdD | 19 >> ... >> >> Notice that "colour" wasn't in the table, and was aggregated over. >> >> The problem is that I have at least four tables like this, and I'm >> thinking it would be worth my time to make a clean solution. I'm looking >> for a clean way of doing this, and I'm hoping Angular Directives can help. >> Here's an example of how I imagine it could work: >> >> <table class="item_table" >> sort-rows >> aggregate-identical-rows-in-rightmost-column >> make-rowspans-for-identical-cells >> make-alternating-rows-different-colours> >> <tr> >> <th>Team</th> >> <th>Product</th> >> <th>Count</th> >> </tr> >> <tr ng-repeat="row in all_data_rows"> >> <td>row.team</td> >> <td>row.product</td> >> <td>row.count</td> >> </tr> >> </table> >> >> The problem is that when any of the directives in the <table> tag run, >> the rows created by the <tr ng-repeat...> don't exist yet. From this >> mailing list I see that I could go to the innermost ng-repeat and call a >> directive that checks for $last at every level, but this seems sketchy and >> is a really weird place to put those directives. >> >> Am I trying to use directives for things they aren't designed for? Is >> $last really a perfectly good solution, even if I have nested ng-repeats >> and I have to check for $last all the way out to the <table> tag? Does >> anyone have a good way of doing this angularly? >> >> I know there are javascript approaches I could take, but once the >> contents of the cells get more complicated (e.g. buttons), those get >> messier. This solution just seems so pretty if it would only work. I'd >> appreciate any thoughts. >> >> Thanks, >> Bartholomew >> > -- > You received this message because you are subscribed to a topic in the > Google Groups "AngularJS" group. > To unsubscribe from this topic, visit > https://groups.google.com/d/topic/angular/-DuD9KH-sq8/unsubscribe. > To unsubscribe from this group and all its topics, send an email to > [email protected]. > To post to this group, send email to [email protected]. > Visit this group at http://groups.google.com/group/angular. > For more options, visit https://groups.google.com/d/optout. > -- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
