AngularJS中修改ng-repeat循环内点击元素的tooltip

哈哈，这个问题我之前也碰到过！核心问题就是你把所有tooltip都绑定到了同一个全局变量categoryConfig.followInfo上，所以只要这个变量一更新，所有循环出来的元素tooltip全跟着变了。要实现只修改点击元素的tooltip，得把每个tooltip的内容和对应的auction项关联起来，而不是用全局变量。下面是具体的修改方案：

步骤1：给每个Auction项添加独立的Tooltip属性 #

首先，在你获取到auctions数据之后，给每个auction对象添加一个专属的tooltip文本属性，比如followTooltip，设置默认的提示内容（就是你原来默认显示的"Dodaj do wishlisty"）：

// 假设你是这样获取auctions数据的（根据你的实际代码调整）
yourAuctionService.getAuctions().then(function(response) {
  $scope.auctions = response.data;
  // 遍历每个auction，添加默认tooltip文本
  $scope.auctions.forEach(function(auction) {
    auction.followTooltip = 'Dodaj do wishlisty';
  });
});

步骤2：修改HTML中的Tooltip绑定 #

把原来绑定全局变量的地方，改成绑定当前auction项的followTooltip属性，同时把ng-click的参数改成传递整个auction对象（方便后续修改它的属性）：

<div ng-repeat="n in auctions"> 
  <img 
    src="img/heart_icon.png" 
    alt="Dodaj do wishlisty" 
    class="category__record-button--wishlist-icon" 
    data-ng-if="$parent.authentication.isAuth" 
    data-ng-click="addFollowAuction(n)" 
    uib-tooltip="{{ n.followTooltip }}" 
    tooltip-placement="top" 
    tooltip-trigger="'mouseenter'" 
    tooltip-append-to-body="true"
  > 
</div>

步骤3：更新JS中的回调函数 #

现在addFollowAuction接收的是整个auction对象，在请求成功后，直接修改这个对象的followTooltip属性即可，这样只会影响当前点击的元素：

$scope.addFollowAuction = function (auction) { 
  console.log(auction.id); 
  auctionsFollowService.addFollowAuction(auction.id)
    .then(function (response) { 
      if(response.detail === 'success follow') { 
        // 只修改当前点击的auction的tooltip文本
        auction.followTooltip = 'Pomyślnie dodano ten przedmiot do wishlisty!'; 
      } 
    }, function (err) { 
      console.log('err adding to wishlist ' + err); 
    }); 
};

为什么这样可行？ #

每个ng-repeat循环出来的元素都对应一个独立的auction对象，现在tooltip绑定的是该对象的专属属性，修改时只操作当前点击的那个对象的属性，自然只有对应的tooltip会更新，其他元素完全不受影响。

如果你不想给auction对象添加额外属性，也可以用一个单独的对象来存储每个auctionId对应的tooltip文本，比如$scope.followTooltips = {}，初始化时给每个auctionId设置默认值，HTML里用uib-tooltip="{{ followTooltips[n.id] }}"，函数里修改followTooltips[auction.id] = 'xxx'，不过第一种方法和auction对象直接关联，逻辑更清晰。

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