CODEWITHSUNDEEP
javascriptangularjstooltipangular-ui-bootstrap
BT101
BT101

Reputation: 3836

Change tooltip of clicked element in ng-repeat AngularJS

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?

Upvotes: 1

Views: 505

Answers (1)

Ori Price
Ori Price

Reputation: 4221

you need followInfo to be an array of items and each item has its own tooltip reference:

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

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

notice $scope.categoryConfig.followInfo[auctionId] don't forget to init followiInfo before: $scope.categoryConfig.followInfo =[]

Upvotes: 5

Related Questions