not working inside table

Question

If I place the div element in the inner <tr> block the controller doesn't work. Am I doing something wrong here? I tried debugging through chrome that gets stuck at a particular index

            <div ng-controller="ctrl3">
                            <tr>
                                <table cellspacing="0" cellpadding="0" style="">
                                    <tbody>

                              i want to place the controller here but it doesn't show the result
                                        <tr><td align="left"><table cellspacing="0" cellpadding="0" style="" class="celltable">

                                                <thead>
                                                    <!--change style of column with css-->
                                                    <col >
                                                    <col >
                                                    <col >
                                                    <col >
                                                    <col >
                                                    <tr>
                                                        <th colspan="1" ng-repeat="b in buildheadings" class="Header">{{b}}</th>

                                                    </tr>
                                                </thead>

                                                <tbody><!--display none-->
                                                    <!--onclick-->



                                                    <tr >

                                                        <td ng-repeat="case in cases">{{case}}</td>                                 


                                                    </tr>




                                                </tbody>

                                                </table>
                                            </td>
                                        </tr>
                                 </tbody>
                                </table>
                            </tr>
                    </div>

Here's the javascript code..

                <script>
                analyzer.controller('ctrl3',function($scope){

                            $scope.featureheadings=['Feature','Total','Passed','Failed','Random'];
                            $scope.buildheadings=['Build','Total','Passed','Failed','Random'];
                        });

                </script>

Also, can I use the same controller for separate blocks?

But if you set this to the div like in your example it works? — m1crdy, Jul 27 '16 at 16:31
Does it have to be a table? Would display:table, display:table-cell, and display:table-row (in css) work? — Amy Blankenship, Jul 27 '16 at 16:34

score 0 · Answer 1 · answered Jul 25 '17 at 21:22

0

if you put multi ng-controller inside any table, it only works for 1 controller, not the second one. But if you remove table tag, all controller will works

answered Jul 25 '17 at 21:22

hoogw

4,982
1
37
33

score -1 · Accepted Answer · edited May 23 '17 at 10:28

-1

div tag can not be used above tr tag. Instead you can use tbody tag to do your work. If you are planning to give id attribute to div tag and doing some processing, same purpose you can achieve through "tbody" tag. Div and Table are both block level elements. so they can not be nested. For further information visit this page : <div> into a <tr>: is it correct?

secondly, you can put "div" tag inside "td" tag.

<table>
  <tr>
    <td>
        <div></div>
    </td>
  </tr>
</table>

In order to work with controller, Best way to put ng-controller with table tag or above table tag.

Hope it helps you!

Cheers!

edited May 23 '17 at 10:28

Community

1
1

answered Jul 27 '16 at 16:33

Varit J Patel

3,497
1
13
21

So, if i have a Lots of blocks inside , I cannot use div for any element ? – matrixguy Jul 27 '16 at 16:37
I reckon yes, but if you want to put div for `ng-controller`, I think you can put on `tr` block also. – Varit J Patel Jul 27 '16 at 16:41
No, does not work, I tried. if you put multi ng-controller inside any table tag, it only works for 1 controller, not the second one. But if you remove table tag, all controller will works. – hoogw Jul 25 '17 at 21:19

score -1 · Answer 3 · answered Jul 27 '16 at 16:41

There is problem in html markup. try this,

<table cellspacing="0" cellpadding="0" style="" ng-controller="ctrl3">
    <thead>
        <tr>
            <th colspan="1" ng-repeat="b in buildheadings" class="Header">{{b}}</th>
        </tr>
    </thead>
    <tbody>
        <tr >
            <td ng-repeat="case in cases">{{case}}</td>
        </tr>
    </tbody>
</table>

And,

 angular.module('AppName', []).controller('ctrl3', function($scope) {
    $scope.featureheadings = ['Feature', 'Total', 'Passed', 'Failed', 'Random'];
    $scope.buildheadings = ['Build', 'Total', 'Passed', 'Failed', 'Random'];
    $scope.cases = ['one', 'two', 'three', 'four', 'five'];
 });

Thanks!

not working inside table

3 Answers3