在 ng-repeat AngularJS 中更改单击元素的工具提示答案

【问题标题】：Change tooltip of clicked element in ng-repeat AngularJS在 ng-repeat AngularJS 中更改单击元素的工具提示
【发布时间】：2018-05-21 20:01:33
【问题描述】：

单击元素后，我正在执行函数，并且在其成功后，我想更改单击元素的工具提示。

我在 ngRepeat 循环中显示了多个带有此工具提示的元素。但是我只想在 currentTarget 元素（被点击的元素）上更改工具提示。目前我正在将工具提示显示为来自控制器的插值字符串，并且在函数成功后我正在更改此字符串。 这导致每个带有此工具提示的元素都有新的工具提示，而不仅仅是被点击的那个。

<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.id)"
         uib-tooltip="{{ categoryConfig.followInfo }}"
         tooltip-placement="top"
         tooltip-trigger="'mouseenter'"
         tooltip-append-to-body="true">
</div>

所以categoryConfig.followInfo 是我上面写的这个字符串，它在addFollowAuction() 函数成功后更改：

$scope.addFollowAuction = function (auctionId) {
    console.log(auctionId);
    auctionsFollowService.addFollowAuction(auctionId)
        .then(function (response) {
            if(response.detail === 'success follow') {
                $scope.categoryConfig.followInfo = 'Pomyślnie dodano ten przedmiot do wishlisty!';
            }
        }, function (err) {
            console.log('err adding to wishlist ' + err);
        });
};

然后循环显示的所有图像都有新的工具提示信息，但我只想将新信息附加到单击的图像。我尝试使用$event，但它不起作用，因为我正在更改$scope.categoryConfig.followInfo。

如何仅将新的工具提示信息附加到单击的元素？

【问题讨论】：

标签： javascript angularjs tooltip angular-ui-bootstrap

【解决方案1】：

您需要 followInfo 是一个项目数组，并且每个项目都有自己的工具提示引用：

<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.id)"
     uib-tooltip="{{ categoryConfig.followInfo[n.id] }}"
     tooltip-placement="top"
     tooltip-trigger="'mouseenter'"
     tooltip-append-to-body="true">

通知uib-tooltip="{{ categoryConfig.followInfo[n.id] }}"

$scope.addFollowAuction = function (auctionId) {
console.log(auctionId);
auctionsFollowService.addFollowAuction(auctionId)
    .then(function (response) {
        if(response.detail === 'success follow') {
            $scope.categoryConfig.followInfo[auctionId] = 'Pomyślnie dodano ten przedmiot do wishlisty!';
        }
    }, function (err) {
        console.log('err adding to wishlist ' + err);
    });
};

通知$scope.categoryConfig.followInfo[auctionId] 之前不要忘记初始化followiInfo：$scope.categoryConfig.followInfo =[]

【讨论】：