javascript - ng-mouseover 不显示数据

标签 javascript jquery angularjs html

我有一个表格,在其中一列上,我希望在鼠标悬停或鼠标输入时显示一些数据,但它不能以 Angular 工作。

 <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 中显示数据,但它似乎不起作用。有人提供任何线索吗?

最佳答案

你的 ng-mouseover 应该是这样的:

ng-mouseover="myMouseOverFuntion()"

在你的 Controller 中:

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

最后,在你的html中:

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

关于javascript - ng-mouseover 不显示数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28427319/

相关文章:

javascript - 从文本区域获取输入

angularjs - 错误 : AotPlugin was detected but it was an instance of the wrong class

angularjs - 单击浏览器窗口中的任意位置时如何设置变量?

javascript - 服务器端 VS 客户端呈现的模板性能?

javascript - 更改页面时AngularJS自定义窗口

javascript - vue.js 连字符属性在组件中未正确解释

javascript - 在批处理文件中使用 JSMin

javascript - 显示和隐藏具有多个类名的 div jquery 复选框

javascript - Ajax 与 jQuery + PHP 不起作用

jquery - 使用缓冲区中的 drawImage 更新 Canvas 不要使用 drawImage 应用操作