Question

I’m having an Angular Js like this

function Ctrl($scope) {
      $scope.gardens = [
        {garden:'1', trees: ["a", "b", "c", "d"]},
        {garden:'2', trees: ["e", "f", "g", "h"]},
        {garden:'3', trees: ["i", "k", "l", "m"]}
      ];
}

Now I want to display it in an html table as follow:

|Garden|Tree|
|1          |
|      |a   |
|      |b   |
|      |c   |
...
|2          |
|      |e   |
|      |f   |
|      |g   |

I can do this manually with DOM but have no solution with AngularJS.

(What I tried on html code:

<table ng-app="" ng-controller="Ctrl">
  <tr ng-repeat="garden in gardens">
    <td>{{garden.garden}}</td>
  </tr>
</table>

)

Please help!

Johnny

Answer 1

You can do like this:

http://jsfiddle.net/ffVeu/

This is a base, just use it to produce a prettier HTML 😉

HTML

<div ng-app>
  <table ng-controller="Ctrl">
    <tr>
      <th>Garden</th>
      <th>Tree</th>
    </tr>
     <tr ng-repeat="garden in gardens">        
        <td class="firstColumn">{{garden.garden}}</td>
        <td>
          <table>
            <tr ng-repeat="tree in garden.trees"><td>
          {{tree}}
              </td>
            </tr>
          </table>
        </td>        
     </tr>
  </table>
</div>

CSS (ugly, just to show the result, do not use this…)

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<link rel="stylesheet" 
 href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script 
 src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js">
</script>
<style>
.done-true {
  text-decoration: line-through;
  color: grey;
}

.firstColumn{
vertical-align: top;
}

table, tr, td { 
  padding: 2px;  
  margin: 20px;
  text-align: center;
}

th {
    background-color: silver;
  color: white;
  font-weight: bold;
  padding: 10px;
}
tr{
  border: 1px solid silver;
}

tr tr{
  border: none;
}