Get DB data and fill the title attribute for tooltip in Angularjs

Question

I am struggling on how the bootstrap tooltip's title attribute's text data can be retrieved and shown through the captured data from database.

I have already captured the row data for my table using $http and correctly show my table data, I want to use the data as my tooltip data too

enter image description here

Here, I can successfully use ng-repeat to loop through my rowData, but my rowData also contains the tooltip data for each td, how can I modify the tooltip text attribute in order to show tooltip data?

The following is my controller on how to get the rowData enter image description here

Thanks all for the kind help

Sorry for missing some info, I actually write a directive specifically for the tooltip as follows enter image description here

The cellData variable is from the rowData which is come from the pData, the pData comes from the data read from DB using GET method

If you are able to get the data inside ng-repeat why are you not a able to use it directly? What errors are you getting. — Coder John
– Coder John, Commented Aug 30, 2014 at 6:12
Ahaaan I got the exact issue you are facing. You should be using the ng-repeat-start and ng-repeat-end that should help to achieve what you are trying. Read more here docs.angularjs.org/api/ng/directive/ngRepeat — Coder John
– Coder John, Commented Aug 30, 2014 at 6:54
@CoderJohn Thanks for the reply, but I need to put the cellData into the title attribute, but angularjs doesn't seem to allow me to do so, it just output the text {{cellData}}. — user2361494
– user2361494, Commented Aug 30, 2014 at 8:51
See if you can add plunker/jsfiddle link by using your code that comes from db. u just declare one object and assign returned data to it, just like myobj=[{paste ur db data}]; keep your code minimal n working so that people can play with your code, you will get your solution. — Sudarshan Kalebere
– Sudarshan Kalebere, Commented Aug 30, 2014 at 9:32
But where does the cellData variable come from ? I can't see it initialised anywhere in the code nor does it reference from ng-repeat loop? — Coder John
– Coder John, Commented Aug 30, 2014 at 9:40

Sudarshan Kalebere · Accepted Answer · 2014-08-30 09:51:58Z

I think the issue is with nested ng-repeat & their $scope, but if the data is coming in your tr td then you need to work little different to get your tooltip. I am providing you a simple tooltip example see if you can modify your code according to it, It works with BS tooltip. below i have pasted my code, also see this demo demo

html code
<body ng-app="myApp">
    <table class="table" ng-controller="ctrl">
        <thead>
            <tr><th>column</th></tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <span tooltip="that">this</span>
                </td>
            </tr>
            <tr ng-repeat="foo in bar">
                <td><span tooltip="{{foo.tooltip}}">{{foo.content}}</span></td>
            </tr>
        </tbody>
    </table>
</body> 

app.js
var app = angular.module('myApp', ['ui.bootstrap']);

app.controller('ctrl', ['$scope', function ($scope) {
    $scope.bar = [];
    // doing something async (exec time simulated by setTimeout)
    myAsyncFunc(function (bar) {

        $scope.$apply(function() {
             $scope.bar = bar;
        });
    });

}]);

var myAsyncFunc = function (done) {
    // simulate some kind of timeout due to processing of the function
    setTimeout(function () {
        return done([{tooltip: 'this is the tooltip', content: 'this is the content'}]);
    }, 500);
};

Collectives™ on Stack Overflow

Get DB data and fill the title attribute for tooltip in Angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related