获取数据库数据并填写Angularjs中工具提示的title属性

时间:2014-08-30 06:03:23

标签: angularjs twitter-bootstrap tooltip

我正在努力研究如何通过数据库中捕获的数据检索并显示bootstrap tooltip的title属性的文本数据。

我已经使用$ http捕获了我的表的行数据并正确显示了我的表数据,我也希望将数据用作我的工具提示数据

enter image description here

在这里,我可以成功使用ng-repeat来遍历我的rowData,但是我的rowData还包含每个td的工具提示数据,如何修改工具提示文本属性以显示工具提示数据?

以下是我的控制器如何获取rowData enter image description here

感谢所有人的帮助

很抱歉错过了一些信息,我实际上是专门针对工具提示编写了一个指令,如下所示 enter image description here

cellData变量来自来自pData的rowData,pData来自使用GET方法从DB读取的数据

1 个答案:

答案 0 :(得分:1)

我认为问题在于嵌套的ng-repeat&他们的美元范围,但如果数据进入你的工具,那么你需要工作一点点来获得你的工具提示。我正在为您提供一个简单的工具提示示例,看看您是否可以根据它修改代码,它适用于BS工具提示。下面我已经粘贴了我的代码,也看到了这个演示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);
};