Question

我正在尝试使用HTML中的角度代码生成一个表。现在我似乎有我希望表格看起来我是如何设置此代码的：

<div class="row">
  <div class="col col-25">Date</div>
  <div class="col col-50">Name of Customer</div>
  <div class="col col-25">Hours Used</div>
</div>

我所做的是在角度代码中生成一个列表（这是正确完成的），我已经以某种方式对它们进行了排序，其中Date是第一个条目，而Hours Used是最后一个条目。要以HTML格式生成表格，我使用以下代码：

 <div class="row">
   <div ng-repeat="B in ConvertToTableRow(T) track by $index">
     <div class="col col-25" ng-if="$index == 0">
       {{ B }} &nbsp
     </div>
     <div class="col col-50" ng-if="$index == 1">
         {{ B }} &nbsp
     </div>
     <div class="col col-25" ng-if="$index == 2">
         {{ B }} &nbsp
     </div>                   
   </div>          
</div>

第一行中的所有内容都运行良好，并根据我的需要进行设置，但第二个条目（当索引为1时）将永远不会将其表格设置为col-50，而是坚持使用col-25。现在我已经测试过看看这些值是否等于1或2，但它似乎工作正常，信息也正确出来但它的样式没有正确。

是否可以使用Angular和HTML以这种方式设置表格？

Answer 1

使用ng-class会不会更好？我认为还有更好的方法，但这只是我的头脑。我希望这有帮助！ :) ng-class

的文档

 <div class="row">
   <div ng-repeat="B in ConvertToTableRow(T) track by $index">
     <div class="col" ng-class="{'col-25': $index % 3 !== 1, 'col-50': $index % 3 === 1}">
       {{ B }} &nbsp
     </div>              
   </div>          
</div>

ng-if和col col-50似乎不在一起？

1 个答案: