Home » Javascript » Change tooltip of clicked element in ng-repeat AngularJS

Change tooltip of clicked element in ng-repeat AngularJS

Posted by: admin August 19, 2018 Leave a comment

Questions:

After click of element I’m executing function and on its success I want to chagne tooltip of clicked element.

I have more than one element with this tooltip displayed in ngRepeat loop. However I want to change tooltip only on currentTarget element (element which was clicked). Currently I’m displaying tooltip as interpolated string from controller and after function success I’m changing this string. It cause that every element with this tooltip have new tooltip not only the one which was clicked.

<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>

So categoryConfig.followInfo is this string I was writing above and it is changed after addFollowAuction() function succeed:

$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);
        });
};

And then all images displayed from loop have new tooltip info but I want only attached new info to clicked image. I tried to use $event but it didn’t work since I was changing $scope.categoryConfig.followInfo either way.

How to attach new tooltip info only to clicked element?

Answers: