码迷,mamicode.com
首页 > Web开发 > 详细

angularjs鼠标移入移出实现显示隐藏

时间:2018-04-09 21:07:30      阅读:1341      评论:0      收藏:0      [点我收藏+]

标签:ng-repeat   技术   使用   ems   data-   dex   prim   trash   隐藏   

<tr ng-repeat="item in items track by $index">
    <td data-title="操作" align="center" ng-mouseenter="$parent[‘buttonList‘+$index] = true" ng-mouseleave="$parent[‘buttonList‘+$index] = false">
          <div ng-show="!$parent[‘buttonList‘+$index]">操作</div>
           <div ng-show="$parent[‘buttonList‘+$index]">
                  <button class="btn btn-primary fa fa-download"></button>
                  <button class="btn btn-success fa fa-reply"></button>
                  <button class="btn btn-primary fa fa-edit"></button>
                  <button class="btn btn-danger fa fa-trash"></button>
             </div>          
    </td>
</tr>

  主要是ng-mouseenter和ng-mouseleave配合使用,同时注意$parent实现动态拼接变量

  截图如下:

    技术分享图片

 

angularjs鼠标移入移出实现显示隐藏

标签:ng-repeat   技术   使用   ems   data-   dex   prim   trash   隐藏   

原文地址:https://www.cnblogs.com/mini-fan/p/8761958.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!