3

私はこのようなAngularJsを持っています

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"]}
      ];
}

次に、次のようにhtmlテーブルに表示します。

|庭|木|
| 1 |
| | a |
| | b |
| | c |
..。
| 2 |
| | e |
| | f |
| | g |

これはDOMを使用して手動で行うことができますが、AngularJSを使用した解決策はありません。

（私がhtmlコードで試したこと：

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

）。

助けてください！

ジョニー

4

1 に答える 1

4

あなたはこのようにすることができます：

http://jsfiddle.net/ffVeu/

これはベースです。これを使用して、よりきれいな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（醜い、結果を表示するためだけに、これは使用しないでください...）

</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;
}
于 2013-01-08T09:40:15.993 に答える