テーブルの外側のアイコン付きngTable

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 $scopeから

<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はそれのために何を理解していないことを行うためには、あなたが構文として

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

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

をコントローラを使用している場合はthisを使用して、次の

<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

にあなたのHTMLを変更することができます）。これを浮動小数点要素として設定し、テーブルの外に移動することができます。