Das Rasterelement kann nicht mithilfe von SmartTable in Angular JS ausgewählt werden

Question

Ich habe das Raster mit SmartTable in Angular JS implementiert. Laut Smart Table-Dokumenten müssen wir zur Auswahl des Rasterelements st-select-row="row" hinzufügen. Ich habe das auch hinzugefügt. Aber ich kann das Gitter nicht auswählen.

Implementierte App kann in Plunk (URL unten) gesehen werden. Kann mir bitte jemand helfen, die Gitterreihe als wählbar zu verwenden. Außerdem möchte ich eine Funktion aufrufen, wenn auf auf Zeile klicken.

Plunkr here

Answer 1

Ihre Plunker tatsächlich funktioniert

, wenn eine Zeile Smart-Tabelle hinzufügen die Eigenschaft isSelected=true zu dem zugehörigen Modell und einen Klassennamen Auswahl st-selected zum tr Element

fügen Sie einfach eine CSS-Regel und Sie werden es sehen können

.st-selected{ 
    border-left:4px solid black; 
} 

Answer 2

app.controller('selectionCtrl', ['$scope', '$filter', function (scope, filter) { 
 
    scope.rowCollection = [ 
 
     {firstName: 'Laurent', lastName: 'Renard', birthDate: new Date('1987-05-21'), balance: 102, email: 'whatever@gmail.com'}, 
 
     {firstName: 'Blandine', lastName: 'Faivre', birthDate: new Date('1987-04-25'), balance: -2323.22, email: 'oufblandou@gmail.com'}, 
 
     {firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: 'raymondef@gmail.com'} 
 
    ]; 
 
}]);

.st-selected{ 
 
    color:cornflowerblue ; 
 
}

<table st-table="rowCollection" class="table"> 
 
<thead> 
 
<tr> 
 
\t <th st-sort="firstName">first name</th> 
 
\t <th st-sort="lastName">last name</th> 
 
\t <th st-sort="birthDate">birth date</th> 
 
\t <th st-sort="balance">balance</th> 
 
\t <th>email</th> 
 
</tr> 
 
</thead> 
 
<tbody> 
 
<tr st-select-row="row" st-select-mode="multiple" ng-repeat="row in rowCollection"> 
 
\t <td>{{row.firstName | uppercase}}</td> 
 
\t <td>{{row.lastName}}</td> 
 
\t <td>{{row.birthDate | date}}</td> 
 
\t <td>{{row.balance | currency}}</td> 
 
\t <td><a ng-href="mailto:{{row.email}}">email</a></td> 
 
</tr> 
 
</tbody> 
 
</table>