AngularJS 1.3+Salesforce Visualforce购物车：如何实现添加行状态显示列？

嘿，针对你在AngularJS 1.3 + Visualforce购物车应用里要添加状态列的需求，我给你整理了一套可行的实现方案，一步步来：

1. 给产品数据模型添加状态属性 #

首先，你需要给每个产品行的Angular模型加上一个状态字段，用来存储添加购物车的结果。假设你的产品列表存在$scope.products里，在初始化或者获取产品数据的时候，给每个item添加cartStatus属性：

// 假设你是从后端获取产品列表后处理，添加初始状态
$scope.products = yourFetchedProducts.map(product => {
  return angular.extend(product, { cartStatus: '' }); // 初始状态为空字符串
});

2. 在表格中新增状态列 #

接下来修改你的Visualforce表格，添加一列来绑定这个状态字段：

<table ng-table="你的表格配置">
  <!-- 原有列的表头 -->
  <th>购物车状态</th>
  
  <tbody>
    <tr ng-repeat="product in products | filter:你的筛选条件">
      <!-- 原有单元格 -->
      <td>{{ product.cartStatus }}</td>
      <td><input type="checkbox" ng-model="product.selected" /></td>
    </tr>
  </tbody>
</table>

3. 修改addToCart按钮的处理逻辑，更新每行状态 #

现在要调整你的RemoteAction调用逻辑，在异步回调中更新对应产品行的cartStatus。因为Salesforce的RemoteAction是原生JavaScript异步调用，不在Angular的脏检查上下文里，所以更新模型后需要手动调用$scope.$apply()触发视图更新：

$scope.addToCart = function() {
  // 筛选出用户选中的产品
  const selectedItems = $scope.products.filter(item => item.selected);
  
  selectedItems.forEach(item => {
    // 调用你的RemoteAction，参数保持和你现有代码一致
    '{!$RemoteAction.APTS_CustomSolutionctrl.addToCart}'(
      item.APTS_Product__c,
      item.Id,
      cartID,
      0,
      null,
      function(result, event) {
        if (event.status) {
          // 根据后端返回的result更新状态
          if (result === true) {
            item.cartStatus = '添加成功';
          } else {
            item.cartStatus = '已在购物车中';
          }
          // 触发Angular脏检查，更新视图
          $scope.$apply();
        } else {
          // 处理调用失败的情况
          item.cartStatus = `添加失败：${event.message}`;
          $scope.$apply();
        }
      }
    );
  });
};

4. （可选）给状态添加样式优化 #

为了让状态更直观，你可以用ng-class给不同状态的单元格加上样式：

<td ng-class="{
  'text-green': product.cartStatus === '添加成功',
  'text-orange': product.cartStatus === '已在购物车中',
  'text-red': product.cartStatus.includes('失败')
}">
  {{ product.cartStatus }}
</td>

然后在你的Visualforce页面里添加对应的CSS：

.text-green { color: #2ecc71; font-weight: bold; }
.text-orange { color: #f39c12; }
.text-red { color: #e74c3c; }

这样用户就能清晰看到每行的添加状态了！

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