表中的AngularDart ng-repeat?

时间:2014-08-12 08:27:30

标签: html angularjs dart angular-dart

我尝试使用子列表迭代列表,并将它们打印为<tr>但没有太大成功。

此代码说明了我想要完成的任务:

<table>
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
  </tr>

  <span ng-repeat='x in [["a1","a2"],["b1","b2"],["c1","c2"]]'>
    <tr>{{x.length}}<tr>
    <span ng-repeat='y in x'>
      <tr>{{y}}<tr>
    </span>
  </span>
</table>

我希望这会显示:

<table>
  <tr>3</tr>
  <tr>a1</tr>
  <tr>a2</tr>
  <tr>b1</tr>
  // and so on..
</table>

我应该怎么做才能使这项工作?我希望能够重复而不需要跨越..

2 个答案:

答案 0 :(得分:1)

仅显示<table>标记内的表格标签(td,th,tr,tbody ...),您应该将ng-repeat添加到<tr>

如果您使用angular1.2或更高版本,则可以使用ng-repeat-startng-repeat-end标记:

HTML:

<table ng-controller="apiCtrl">
    <tr ng-repeat-start="item in foo" ng-init="first=item[0]">
        <td>first: {{ first }}</td>
    </tr>
    <tr ng-repeat-end ng-init="last = item[1]">
        <td>last: {{ last }}</td>
    </tr>
</table>

JS:

function apiCtrl($scope) {
    $scope.foo = [
        ['one', 'uno'],
        ['two', 'dos'],
        ['three', 'tres']
    ];
}

这是JSfiddle

这是fiddle with nested lists

答案 1 :(得分:0)

这个问题确实很老,与此同时AngularDart发生了很大变化。我们可以使用while read -p "Enter a directory to create: " file; do if [ -z "$file" ]; then echo "Error: no input" >&2 break # This exits the while loop fi mkdir "$file" done 标签将各种指令应用于将要重复或放在<ng-container>下的一组标签,依此类推。 *ngIf标签不会出现在DOM输出中,但是其内容将在那里并且受指定指令的影响。

<ng-container>

当component.dart具有以下功能时:

<table>
    <ng-container *ngFor="let row of matrix">
        <tr>
            <ng-container *ngFor="let value of row">
                <td>{{value}}</td>
            </ng-container>
        <tr>
    </ng-container>
</table>