Rahul Rahul - 4 months ago 9
AngularJS Question

<div ng-controller> not working inside table

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?

Answer

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!