angulaire de l'interface utilisateur-réseau: comment faire pour mettre en surbrillance la ligne à la souris?

Je tiens à souligner une ligne entière de l'angulaire de l'interface utilisateur-réseau lorsque la souris est au-dessus de lui.

J'ai essayé de modifier le rowTemplate par l'ajout de ng-mouseover et ng-mouseleave rappels qui définir la couleur d'arrière-plan.

Voici mon rowTemplate-je m'attends à les trois premières lignes de modifier l'ensemble de la ligne de couleur rouge. Mais seulement la cellule actuellement sous la souris est changé.

<div
    ng-mouseover="rowStyle={'background-color': 'red'}; grid.appScope.onRowHover(this);"
    ng-mouseleave="rowStyle={}"
    ng-style="rowStyle"
    ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid"
    ui-grid-one-bind-id-grid="rowRenderIndex + '-' + col.uid + '-cell'"
    class="ui-grid-cell"
    ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }"
    role="{{col.isRowHeader ? 'rowheader' : 'gridcell'}}"
    ui-grid-cell>
</div>

Comment puis-je mettre en surbrillance une ligne entière à la souris événements?

Une autre approche que j'ai essayé: à l'aide de certains fonction de rappel de ce faire-comme le appScope.onRowHover dans l'exemple. Ici, j'ai le champ d'application de la ligne a plané sur. Comment puis-je aller sur le style de ligne à l'intérieur de la onRowHover fonction?

Merci!

Lien vers Plunkr. - Je m'attendre en passant la souris sur une cellule de la grille à transformer la totalité de la ligne rouge.

OriginalL'auteur ethan | 2015-11-26

  1. 9

    Ici, est-il. J'ai fait un changement dans la ligne de modèle.
    http://plnkr.co/edit/gKqt8JEo2FukS3URRLJ5?p=preview

    RowTemplate:

    <div ng-mouseover="rowStyle={'background-color': 'red'}; grid.appScope.onRowHover(this);" ng-mouseleave="rowStyle={}">
    <div  ng-style="rowStyle" ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" ui-grid-one-bind-id-grid="rowRenderIndex + '-' + col.uid + '-cell'"
    class="ui-grid-cell" ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }" role="{{col.isRowHeader ? 'rowheader' : 'gridcell'}}" ui-grid-cell>
    </div>
</div>
    J'aurais utilisé ng-class au lieu de ng-style, mais la logique serait le même.
    Merci!!!! Ma compréhension est que la div extérieure englobe l'ensemble de la ligne, tandis que l'intérieur div obtient élargi pour chaque cellule de la ligne. Est-ce exact?

    OriginalL'auteur SaiGiridhar

  2. 1

    Il y a un petit problème avec la solution de SaiGiridhar: la mise en valeur de sélection des arrêts de travail depuis un autre wrapper est ajouté sur le dessus de la ng-repeat div.

    Un petit correctif pour ce serait:

    <div ng-mouseover="rowStyle={'background-color': (rowRenderIndex%2 == 1) ? '#76BED6' : '#BFDAE3'};" ng-mouseleave="rowStyle={}" ng-style="selectedStyle={'background-color': (row.isSelected) ? '#379DBF' : ''}">
    <div ng-style="(!row.isSelected) ? rowStyle : selectedStyle" ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" ui-grid-one-bind-id-grid="rowRenderIndex + '-' + col.uid + '-cell'"
        class="ui-grid-cell" ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }" role="{{col.isRowHeader ? 'rowheader' : 'gridcell'}}" ui-grid-cell>
    </div>
</div>

    Je viens de copier-collé de mon code. Il ajoute suppléant ligne style pour en surbrillance les lignes et corrige la ligne sélectionnée en évidence.

    Espère que cela aide quelqu'un.

    OriginalL'auteur Lentyai

  3. 0

    C'est plus difficile si vous avez activé la sélection. L'utilisation de ce.

    //js

       $templateCache.put('ui-grid/ui-grid-row',
            `
            <div 
            ng-mouseenter="row.isHov = true" 
            ng-mouseleave="row.isHov = false" 
            ng-init="row.isHov = false"
            ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid"
            ui-grid-one-bind-id-grid="rowRenderIndex + '-' + col.uid + '-cell'"
            class="ui-grid-cell"
            ng-class="{ 'on': row.isHov, 'ui-grid-row-header-cell': col.isRowHeader }"
            role="{{col.isRowHeader ? 'rowheader' : 'gridcell'}}"
            ui-grid-cell>
          </div>
            `
        );

    //scss

    .ui-grid-cell {


&.on {
    .ui-grid-cell-contents {
        background: red;
    }
}

    }

    OriginalL'auteur httpete