Question

我有一张桌子，在其中一列上我希望在鼠标悬停或鼠标中心显示一些数据，但它不是有角度的。

 <table id="ls-shop-rel-list" class="row ls-shop-list packages" data-per-page="40">
   <thead class="">
     <tr class="row hidden-xs">
                <th>Apply?</th>
                <th><span class="down" data-column="bank.name">Bank</span></th>
                <th><span class="down" data-column="package_name">Package</span></th>
                <th><span class="down" data-column="info_name">Info</span></th>
                <th><span class="down" data-column="monthly_payment">Monthly<br>RM</span></th>
                <th><span class="active up" data-column="interest_rate">Interest<br>Rate</span></th>
                <th><span class="down" data-column="maximum_tenure">Max<br>Tenure</span></th>
                <th><span class="down" data-column="maximum_finance">Max<br>Margin</span></th>
                <th><span class="down" data-column="lock_in">Lock in<br>Period</span></th>
                <th><span class="down" data-column="is_flexi">Full Flexi<br>Loan?</span></th>
              </tr>
            </thead>
            <tbody>

              <tr class="row hidden-xs" ng-repeat="data in loans">
                <td><input type="checkbox" class="hidden-xs" id="{{data.id}}"/>
                    <img class="ls-decoration hidden-lg hidden-md hidden-sm" src="http://cdn.app.com.my/assets/button-selected-large-a3480a3ee5f72bf6937d0b95ab38b347.png">
                </td>
                <td>
                    <img style="max-width: 90px; max-height: 35px" alt="{{data.bank_name}}" src="http://static.app.com.my/assets/common/banks/{{data.bank_image}}">
                </td>
                <td>{{data.name}}</td>
                **<td><img class="tip" src="http://static.loanstreet.com.my/assets/common/glasses.png" ng-mouseover="data.notes"></td>**
                <td>{{data.monthly}}</td>
                <td>{{data.effective_rate}}%</td>
                <td>{{data.maximum_tenure}}yrs</td>
                <td>{{data.maximum_finance}}%</td>
                <td>{{data.lock_in_period}}</td>
                <td>{{data.is_flexi}}</td>
              </tr>

            </tbody>
          </table>

在突出显示的列上，我想要鼠标悬停，以便在data.notes中显示数据但似乎无法正常工作。任何人的线索？

Answer 1

你的ng-mouseover应该是：

ng-mouseover="myMouseOverFuntion()"

并在您的控制器中：

$scope.showDataNotes=false;
$scope.myMouseOverFuntion=function(){
  $scope.showDataNotes=true;
}

最后，在你的html中：

<div ng-show="showDataNotes">{{data.notes}}</div>

Answer 2

我认为，css将是一个更好的选择

<td class="data-notes"><img class="tip" src="http://static.loanstreet.com.my/assets/common/glasses.png"><span class="notes">{data.notes}</span></td>

然后

td.data-notes span.notes{
    display: none;
}
td.data-notes:hover span.notes{
    display: inline;
}

Answer 3

感谢各位回复。但我像这样解决了它

<img class="tip" src="http://static.loanstreet.com.my/assets/common/glasses.png" popover="{{data.notes}}" popover-trigger="mouseenter">

angular ui-bootstrap popover解决了它，但你必须添加

<script src="scripts/ui-bootstrap-tpls-0.12.0.min.js"></script>

到你的main.html文件然后你可以调用popover组件。

ng-mouseover没有显示数据

3 个答案: