桌子外带有图标

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

为了做到这一点(我真的不明白什么是好UX(。您可以将其设置为浮点元素，然后将其移到表格外。

Answer 2

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

，则可以使用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>