AngularJS+HTML表格：为满足条件的AssociateNum列内容添加删除线

嘿，这个需求其实用AngularJS的ng-class指令就能轻松搞定！核心思路就是根据Result列的值，动态给AssociateNum列的内容添加删除线样式。下面是具体的实现步骤和代码示例：

1. 定义CSS样式 #

先写一个用来添加删除线的CSS类，方便后续复用：

.strike-through {
  text-decoration: line-through;
}

2. 编写HTML表格结构 #

在表格的AssociateNum列中，用ng-class指令判断当前行的Result是否为Delivered，如果满足条件就应用上面定义的删除线类：

<table ng-app="myApp" ng-controller="myCtrl" border="1">
  <thead>
    <tr>
      <th>AssociateNum</th>
      <th>Result</th>
      <!-- 可添加其他表头列 -->
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in records">
      <td ng-class="{'strike-through': item.Result === 'Delivered'}">
        {{item.AssociateNum}}
      </td>
      <td>{{item.Result}}</td>
      <!-- 可添加其他数据列 -->
    </tr>
  </tbody>
</table>

3. 配置AngularJS控制器 #

在控制器里准备你的数据源（这里用示例数据演示，你可以替换成自己的真实数据）：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.records = [
    { AssociateNum: 21, Result: 'Delivered' },
    { AssociateNum: 22, Result: 'Pending' },
    { AssociateNum: 23, Result: 'Delivered' },
    { AssociateNum: 24, Result: 'Processing' }
  ];
});

代码逻辑说明 #

• ng-class="{'strike-through': item.Result === 'Delivered'}"：这行代码的作用是，当当前行的Result属性等于Delivered时，自动给<td>元素加上strike-through类，从而让AssociateNum内容显示删除线。
• 这种方式非常灵活，你可以根据需求修改判断条件，或者扩展更多样式规则。

这样一来，所有Result为Delivered的行，对应的AssociateNum就会自动显示删除线啦！

内容的提问来源于stack exchange，提问作者nan