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

Question

点击元素后,我正在执行函数,并且在成功之后,我想查看clicked元素的工具提示.

我在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两种方式,它没有用.

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

Answer 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 =[]