Question

我有“item.adjustment”。调整值可以是正数或负数。根据值的符号，我必须在两个不同的列中显示“调整”：正列和负列。

下面的

是我的方案的示例代码。任何人都可以帮忙吗？

    <tr>
       <td>Positive</td>
       <td>Negative</td>
    </tr>
     <tr>
       <td>{{item.adjustment}}</td>
       <td>{{item.adjustment}}</td>
     </tr>

我可以这样做吗？

      <td ng-if="item.adjustment >= 0"/>
      <td ng-if="item.adjustment < 0"/>

还是更好的方式？

Answer 1

ng-if将根据条件显示/隐藏元素（如果这是您想要的）。但是如果你想根据正面或负面的价值展示不同的风格，那么最好使用ng-class。

E.g

<td ng-class="{ positive: item.adjustment >= 0 }/>
<td ng-class="{ negative: item.adjustment < 0 }/>

然后定义这些类

.positive {
   color: green;
}

.negative {
   color: red;
}

Answer 2

如果我理解你想做什么：

你的JS

    $scope.items = [{adjustment:1}, 
                {adjustment:0.3}, 
                {adjustment:-7},
                {adjustment:0},
                {adjustment:13},
                {adjustment:-4},
                {adjustment:-0.5}];

你的HTML

<tr>
   <td>Positive</td>
   <td>Negative</td>
</tr>
<tr ng-repeat="item in items">
   <td>{{item.adjustment >= 0 ? item.adjustment : ''}}</td>
   <td>{{item.adjustment < 0 ? item.adjustment : ''}}</td>
</tr>

Answer 3

您必须在单独的列中显示它们，但仍然会渲染<td>个。您可以做的是将它们包裹在一个范围内，因为在ng-if上设置<td>本身不会呈现<td>，这会导致负面调整也出现在第一列中

<tr>
   <td>Positive</td>
   <td>Negative</td>
</tr>
 <tr>
   <td><span ng-if="item.adjustment >= 0">{{item.adjustment}}</span></td>
   <td><span ng-if="item.adjustment < 0">{{item.adjustment}}</span></td>
 </tr>

Answer 4

假设您想有条件地显示/隐藏td元素内的文本，您应该在td中添加一个span并使用ng-if。使用您的方法，只会为表格行中的任何给定项目显示其中一个tds。

  <td><span ng-if="item.adjustment >= 0">item.adjustment</span></td>
  <td><span ng-if="item.adjustment < 0">item.adjustment</span></td>

请参阅plunker here，其中突出了您的方法的问题

Angularjs过滤掉了

4 个答案: