AngularJS中如何根据状态值在表格单元格条件显示复选框

没问题！这在AngularJS里用内置指令就能轻松实现，我给你写个极简的可运行示例，看完你马上就能上手～

完整代码示例 #

HTML 部分

<div ng-app="myApp" ng-controller="myCtrl">
  <table border="1">
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Category</th>
        <th>Price</th>
        <th>Status</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="item in items">
        <td>{{item.ID}}</td>
        <td>{{item.Name}}</td>
        <td>{{item.Category}}</td>
        <td>{{item.Price}}</td>
        <td>{{item.Status}}</td>
        <td>
          <!-- 仅当Status为New时显示复选框 -->
          <input type="checkbox" ng-show="item.Status === 'New'" />
        </td>
      </tr>
    </tbody>
  </table>
</div>

JavaScript 控制器部分

angular.module('myApp', [])
.controller('myCtrl', function($scope) {
  // 模拟你的表格数据，包含5列和Status字段
  $scope.items = [
    { ID: 1, Name: "Product A", Category: "Electronics", Price: 99.99, Status: "Old" },
    { ID: 2, Name: "Product B", Category: "Home", Price: 49.99, Status: "New" },
    { ID: 3, Name: "Product C", Category: "Electronics", Price: 149.99, Status: "Old" },
    { ID: 4, Name: "Product D", Category: "Beauty", Price: 29.99, Status: "New" },
    { ID: 5, Name: "Product E", Category: "Home", Price: 79.99, Status: "Old" }
  ];
});

关键说明 #

• 我用了ng-show指令控制复选框显示：当item.Status严格等于'New'时，复选框会显示，否则会被隐藏（通过CSS的display: none实现）。
• 如果你希望完全从DOM中移除Old状态对应的复选框（而不是仅仅隐藏），可以把ng-show换成ng-if，效果类似，但DOM结构会更干净。
• 示例里的表格数据是模拟的，你直接换成自己的业务数据就行，只要保证Status字段只有'Old'和'New'两个值就可以正常工作。

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