AngularJS：ng-repeat内通过ng-disabled实现点赞按钮请求时禁用

你碰到的问题很典型——用全局$scope.btnLikeDisable的话，所有循环出来的按钮都会共享这个状态，自然一点击全禁用了。核心思路就是给每个列表项单独绑定禁用状态，让每个按钮只受自己对应item的状态控制，具体做法如下：

步骤1：给每个item添加独立的禁用属性 #

不管你是从后端获取items数据，还是本地初始化，记得给每个item加上一个用来标记是否正在请求的属性，比如isLiking，默认设为false：

// 假设你在控制器里获取数据后初始化
$scope.items = [/* 你的列表数据 */];
$scope.items.forEach(item => {
  item.isLiking = false; // 初始化禁用状态为false
});

步骤2：修改HTML模板，绑定单个item的禁用状态 #

把按钮的ng-disabled绑定到当前item的isLiking属性，同时点击事件要把当前item传进去：

<div ng-repeat="item in items">
  <button 
    class="button button-block icon ion-thumbsup" 
    ng-model="item.islike" 
    ng-class="item.islike == true ? 'button-on' : 'button-light'"
    ng-disabled="item.isLiking" <!-- 绑定当前item的禁用状态 -->
    ng-click="changeLike(item)" <!-- 把当前item传给处理函数 -->
  >
    {{item.islike ? '已点赞' : '点赞'}}
  </button>
</div>

步骤3：修改点赞处理函数，控制单个item的状态 #

在控制器的changeLike函数里，接收当前点击的item，先把它的isLiking设为true（禁用按钮），发起HTTP请求后，不管成功还是失败，都把isLiking设回false（恢复按钮）：

$scope.changeLike = function(item) {
  // 立即禁用当前点击的按钮
  item.isLiking = true;

  // 发起HTTP请求
  $http.post('/api/like', {itemId: item.id})
    .then(function(response) {
      // 请求成功后的逻辑，比如切换点赞状态
      item.islike = !item.islike;
    })
    .catch(function(error) {
      // 请求失败的处理，比如提示错误
      console.error('点赞失败:', error);
    })
    .finally(function() {
      // 不管成功失败，都恢复按钮可用状态
      item.isLiking = false;
    });
};

关键说明 #

• 为什么用item.isLiking而不是全局变量？因为ng-repeat会为每个item创建独立的子作用域，绑定到item自身的属性后，每个按钮的状态只会对应自己的那一项，不会互相影响。
• 使用finally方法可以确保不管请求成功还是失败，按钮都会恢复可用，避免出现按钮一直禁用的情况。

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