Ionic1/AngularJS：ng-repeat内同名ng-model致点赞按钮失效问题

你遇到的这个问题很典型——ng-repeat生成的所有按钮都绑定了同一个islike变量，导致所有按钮的状态会同步变化，根本原因是它们共享了同一个作用域变量。咱们给每个列表项单独维护点赞状态就能解决，具体步骤如下：

1. 给每个列表项添加独立的点赞状态属性 #

在初始化items数据时，给每个item新增isLike属性（默认设为false，如果后端有返回初始点赞状态，就用对应值覆盖）。比如在控制器里：

// 假设这是你从后端获取的原始数据
$scope.items = [
  {id: 1, content: "第一条内容"},
  {id: 2, content: "第二条内容"},
  // ...更多列表项
];

// 初始化每个item的点赞状态
$scope.items.forEach(function(item) {
  // 如果后端返回了is_like字段，就用该值，否则默认未点赞
  item.isLike = item.is_like || false;
});

2. 修改HTML模板，绑定到item的独立状态 #

把原来的ng-model="islike"改成ng-model="item.isLike"，同时更新ng-class的判断逻辑，让它基于当前item的状态切换样式：

<div ng-repeat="item in items">
  <div class="item item-text-wrap">
    <button class="button button-block icon ion-thumbsup" 
            ng-model="item.isLike" 
            ng-class="item.isLike ? 'button-on' : 'button-light'" 
            ng-click="changeLikeState(item);">
      {{item.isLike ? '已点赞' : '点赞'}}
    </button>
  </div>
</div>

这里还优化了按钮文字，根据状态动态显示“点赞”或“已点赞”，用户体验会更直观。

3. 更新changeLikeState函数 #

现在函数可以直接接收整个item对象，既能方便切换本地状态，也能对接后端接口：

$scope.changeLikeState = function(item) {
  // 先切换本地状态，给用户即时反馈
  item.isLike = !item.isLike;
  
  // 调用后端接口更新数据库（示例）
  // $http.post('/api/update-like-status', {
  //   itemId: item.id,
  //   isLike: item.isLike
  // })
  // .then(function(response) {
  //   // 请求成功的后续处理
  // })
  // .catch(function(error) {
  //   // 请求失败时，把状态切回原来的状态
  //   item.isLike = !item.isLike;
  //   console.error('点赞状态更新失败', error);
  // });
};

补充：为什么原来的写法会失效？ #

ng-repeat会为每个列表项创建子作用域，当你用ng-model="islike"时，AngularJS会先在子作用域查找该变量，找不到就向上追溯到父作用域的islike，所以所有按钮最终绑定的都是同一个父作用域变量，自然会同步变化。而绑定到item.isLike时，每个item是独立的对象，每个按钮的状态只属于当前列表项，就不会互相干扰了。

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