कोणीय जेएस

Question

में स्मार्टटेबल का उपयोग करके ग्रिड आइटम का चयन करने में असमर्थ मैंने अंगुलर जेएस में स्मार्टटेबल का उपयोग करके ग्रिड लागू किया है। ग्रिड आइटम का चयन करने के लिए स्मार्ट टेबल डॉक्स के अनुसार, हमें st-select-row="row" जोड़ने की आवश्यकता है। मैंने इसे भी जोड़ा। लेकिन मैं ग्रिड का चयन करने में असमर्थ हूं।

कार्यान्वित ऐप प्लंक (नीचे यूआरएल) में देखा जा सकता है। क्या कोई मुझे ग्रिड पंक्ति का उपयोग चुनने योग्य के रूप में करने में मेरी सहायता कर सकता है। इसके अलावा, मैं फ़ंक्शन पर कॉल करना चाहता हूं, पंक्ति पर पर क्लिक करना।

Plunkr here

Answer 1

आपका plunker वास्तव में

काम करता है जब एक पंक्ति स्मार्ट-टेबल जुड़े मॉडल और एक वर्ग के नाम st-selected टीआर तत्व को करने के लिए संपत्ति isSelected=true जोड़ने का चयन

सिर्फ एक सीएसएस नियम जोड़ने और आप इसे

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

012 को देखने के लिए सक्षम हो जाएगा