Run jQuery after angular loads

Question

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>

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 — charlietfl
– charlietfl, Commented Aug 26, 2015 at 9: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
– SuperBiasedMan, Commented Aug 26, 2015 at 9:17
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
– George Stocker, Commented Aug 26, 2015 at 13:05

Bitzu · Accepted Answer · 2015-08-26 12:09:44Z

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>

answered Aug 26, 2015 at 12:09

Bitzu

1332 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Run jQuery after angular loads

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related