Angularjs 表外带有图标的表格

我希望垃圾箱图标出现在桌子外面。现在它就在桌子里面，悬停时，垃圾箱图标会出现在将内容向右推之前。如何使垃圾箱图标出现在每个内容旁边的表外

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>

{{trans.name}
{{trans.lastname}

将此更改为

$scope

。如果将控制器用作语法，则可以使用

此

 $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>

{{trans.name}
{{trans.lastname}

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

您所做的只是移动右侧出现的垃圾桶图标。我希望它在左手边，完全不在桌子上。就在桌子旁边。我已经更新了我的答案。如果不创建plunker，我就无法在代码的设计方面为您提供太多帮助。必须以与表中的行（tr）对齐的方式创建div/span。是否可以创建一个plunker？