ngTable avec l'icône en dehors du tableau

Je voudrais que l'icône de la corbeille apparaisse en dehors de la table. En ce moment, c'est à l'intérieur de la table et en vol stationnaire, l'icône de la corbeille apparaît avant de pousser le contenu vers la droite. Comment puis-je faire en sorte que l'icône de la corbeille apparaisse en dehors de la table à côté de chaque contenu?ngTable avec l'icône en dehors du tableau

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

Source

2017-06-27 Roger

Remplacez cette $scope. Vous pouvez utiliser this si vous utilisez le contrôleur Comme syntaxe

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

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

Et changer votre code HTML à ce qui suit

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

Source

2017-06-27 13:42:21 Vivz

ce que vous faites est de déplacer simplement l'icône de la corbeille apparaissant sur le côté droit. Je veux que ce soit sur le côté gauche et complètement hors de la table. Juste à côté de la table. – Roger

J'ai mis à jour ma réponse. Sans créer un plunker, je ne peux pas vraiment vous aider beaucoup dans l'aspect de la conception du code. Vous devez créer le div/span de telle sorte qu'il s'aligne avec les lignes (tr) de la table. – Vivz

Pouvez-vous créer un plunker? – Vivz

Afin de le faire (je ne comprends pas vraiment à quoi bon UX pour elle). Vous pouvez définir cela comme un élément flottant et le déplacer en dehors de la table.

Source

2017-06-27 18:07:37 Dody

ngTable avec l'icône en dehors du tableau

Répondre

Questions connexes