Question

也许我完全困惑td如何工作，因为我没有在我的代码中使用表格（强div信徒），或者我对ng-if的方式感到困惑试图分离我的数据。

无论哪种方式，我都没有得到我预期的结果，但是代码没有任何问题，我认为我的逻辑是关闭的。

这是一个有效的Plunker http://plnkr.co/edit/LoMEMBYc6kUodb9tcbfM?p=preview

<table>
    <tr ng-repeat="z in waiverModalLinks">
      <td ng-if="z.id=='color'" class="{{z.id}}"><a href="{{z.link}}">{{z.title}}</a></td>
      <td ng-if="z.id==''" class="{{z.id}}"><a href="{{z.link}}">{{z.title}}</a></td>
    </tr>
</table>

最终的最终结果是让每个其他td颜色不同，但我意识到当前的逻辑是将彩色td放在左边而非彩色{{1} }} 在右边。但在我意识到我需要两个单独的列之前，这就是我正在使用的对象，首先需要一个表。

但无论如何，那些不起作用的是......那么它们仍然堆积如山。我希望看到桌子左侧的彩色td和桌子右侧的非彩色td。

我逻辑中的错误在哪里？

Answer 1

您的数据模型似乎是混乱的根源。你有一个简单的数组，所以每个td都在同一行。如果创建二维数组，则可以为每个内部数组创建一个新行：

$scope.waiverModalLinks =[
    [
       {title:"1", link:"", id:"color"},
       {title:"2", link:"", id:""}
   ],
   [
       {title:"3", link:"", id:"color"},
       {title:"4", link:"", id:""}
   ]
];

更简单的转发器：

<tr ng-repeat="row in waiverModalLinks">
  <td ng-repeat="z in row" class="{{z.id}}">
    <a href="{{z.link}}">{{z.title}}</a>
  </td>
</tr>

Plunkr：http://plnkr.co/edit/VeXBJcf3naI5bRttQ1Pt?p=preview

Answer 2

z.id或等于'color'或空字符串，但不能同时为两者。因此，每一行最多一个单元格：

如果z.id等于color，则生成的dom将为

<tr ng-repeat="z in waiverModalLinks">
    <td class="{{z.id}}"><a href="{{z.link}}">{{z.title}}</a></td>
    <!-- removed second td -->
</tr>

如果z.id等于'''，生成的dom将为

<tr ng-repeat="z in waiverModalLinks">
    <!-- removed first td -->
    <td class="{{z.id}}"><a href="{{z.link}}">{{z.title}}</a></td>
</tr>

每行需要两个单元格：一个空白，一个填充，反之亦然：

<table>
    <tr ng-repeat="z in waiverModalLinks">
      <td ng-if="z.id==''"></td>
      <td class="{{z.id}}"><a href="{{z.link}}">{{z.title}}</a></td>
      <td ng-if="z.id=='color'"></td>
    </tr>
</table>

为什么我的ng-if在td中有意想不到的结果？

2 个答案: