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