3

I'm trying to style a table that is rendered with ngRepeat based on JSON that is received using a service that uses $http.get.

The problem is that I have side headers and I want to do a border-left like in this picture, but I can't with CSS.

My code is here: http://embed.plnkr.co/V2E0rLJVVOgOlGLzmrER/preview

So I need to run jQuery to style the table with better selectors.

Note that the table is populated in a function inside a controller.

The problem is that I can't do: .frm-tr:first-child td{border-left: "solid"}, and inside the controller, after I get the data, I can't manipulate the DOM that is created inside the service .success function.

This returns nothing:

My controller

    $scope.dashTable = data.data;
    $(document).ready(function () {
        console.log($('.frm-tr'));
    });

My angular table

<table cellspacing='0' cellpadding="0" border="1" ng-repeat="table in dashTable" class="frm-quota-table">
<tbody>
    <tr class="frm-table-header" ng-repeat="header in table.Header">
        <th colspan="{{cell.ColSpan}}" ng-if="cell.Index !== 0" ng-repeat="cell in header.Cells" class="frm-headers clearfix" ng-class="{'border-left':cell.ColSpan === 1}">
            <div ng-if="cell.Text !== '' && cell.ColSpan !== 1" class="frm-table-line pull-left"></div>
            <div ng-class="{'pull-left cell-text': cell.Text !== '' && cell.ColSpan !== 1}">{{cell.Text}}</div>
            <div ng-if="cell.Text !== '' && cell.ColSpan !== 1" class="frm-table-line pull-right"></div>
        </th>
    </tr>
    <tr class="frm-tr" ng-repeat="content in table.Content">
        <th ng-if="th.RowSpan !== 1" rowspan="{{th.RowSpan}}" colspan="{{th.ColSpan}}" class="frm-side-header" ng-repeat="th in content.LeftPart">
            --&nbsp;{{th.Text}}&nbsp;--
        </th>
        <th ng-if="th.RowSpan === 1" rowspan="{{th.RowSpan}}" colspan="{{th.ColSpan}}" ng-repeat="th in content.LeftPart">
            {{th.Text}}
        </th>
        <td ng-repeat="td in content.ContentPart">
                {{td.Text}}
        </td>
    </tr>
</tbody>
</table>
George Stocker
  • 57,289
  • 29
  • 176
  • 237
Bitzu
  • 125
  • 2
  • 11
  • 1
    I doubt you need jQuery but if you must it would need to be put in a directive. look into using `ng-class` and other angular core directives first. Suggest reading: [thinking-in-angularjs-if-i-have-a-jquery-background](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background) – charlietfl Aug 26 '15 at 09:01
  • Please edit the relevant code into this question. You don't need to put it all in your post, but the parts that seem to be the source of the problem should be contained here. – SuperBiasedMan Aug 26 '15 at 09:17
  • Put some code in question and efforts you made so far. – Anand G Aug 26 '15 at 09:38
  • Please don't add "solved" to your question; to mark it as 'solved', you accept an answer (which you can't do just yet because you can't accept your own answer for 48 hours). – George Stocker Aug 26 '15 at 13:05

1 Answers1

1

After discussions with other developers in my team, we did it in angular in a different style:

Solution:

<td ng-repeat="(ndx, td) in content.ContentPart" ng-class="{'border-left-simple': ndx % 3 === 0}"> {{td.Text}} </td>

Bitzu
  • 125
  • 2
  • 11