Question

我希望垃圾桶图标显示在表格之外。现在它在桌子内部并且在悬停时，在将内容推向右边之前会出现垃圾箱图标。如何使垃圾桶图标出现在每个内容旁边的表格之外？

JS

$scope.tdemo = {};
// table dataset
$scope.myDataset = [
   {
        name: 'eeee',
        lastname: 'dada',

   },
   {
       name: 'abc',
       lastname: 'kfc',

   }      
];

$scope.hoverIn = function () {
    this.hoverEdit = true;
};

$scope.hoverOut = function () {
    this.hoverEdit = false;
};

HTML

<table ng-table="twinTableParams" class="table hover">
    <tbody>
       <tr ng-repeat="trans in $data" ng-mouseover="hoverIn()" 
        ng-mouseleave="hoverOut()">
            <td>
               <span ng-show="hoverEdit" class="animate-show">
               <a><i class="fi-trash"></i></a>
               </span>
            </td>
            <td ng-model="name" title="'name'">{{trans.name}}</td>
            <td ng-model="lastname" title="'lastname'">{{trans.lastname}}</td>
       </tr>
    </tbody>
</table>

Answer 1

将其更改为$scope。如果您使用控制器As语法

，则可以使用this

 $scope.hoverEdit=[];
 $scope.hoverIn = function (index) {
                    $scope.hoverEdit[index] = true;
                };

                $scope.hoverOut = function (index) {
                    $scope.hoverEdit[index] = false;
                };

并将您的HTML更改为以下

 <table ng-table="twinTableParams" class="table hover">
        <tbody>

            <tr ng-repeat="trans in $data" ng-mouseover="hoverIn($index)" ng-mouseleave="hoverOut($index)">

                <td ng-model="name" title="'name'">

                    {{trans.name}}
                </td>
                <td ng-model="lastname" title="'lastname'">
                    {{trans.lastname}}
                </td>


            </tr>
        </tbody>
    </table>
<div ng-repeat="trans in $data">
    <span ng-show="hoverEdit[$index]" class="animate-show" >
                       <a>
                         <i class="fi-trash"></i>
                       </a>
    </span>
</div>

Answer 2

为了做到这一点（我真的不明白它的用户体验是什么）。您可以将其设置为float元素并将其移出表格。

ngTable与表外的图标

2 个答案: