How Show and Hide a table row on Angular?
Question
Basically, i have an html table that shows some attributes of a class from my database (parse.com db), each row of my table is clickable and triggers a function, what i'm trying to do, is that based on the value of a column from my db (Access), apply a class to them and make them not clickable.
THIS IS MY MARKUP:
<th><center>Local</center></th>
<th><center>Número </center></th>
<th><center>Tipo</center></th>
</tr>
<tr ng-repeat="field in fields track by $index" >
<td ng-hide="hide_field_not_available" title="'Cancha'" class="off" ><i class="fa fa-futbol-o" aria-hidden="true"></i>
{{field.company}}</td>
<td ng-hide="hide_field_not_available" title="'Número'" class="off" >
<center>{{field.name}}</center></td>
<td ng-hide="hide_field_not_available" title="'Tipo'" class="off" >
<center>{{field.type}}</center></td>
<td ng-hide="hide_field_available" ng-click="makeAReservation(field)" title="'Cancha'" ><i class="fa fa-futbol-o" aria-hidden="true"></i>
{{field.company}}</td>
<td ng-hide="hide_field_available" ng-click="makeAReservation(field)" title="'Número'" >
<center>{{field.name}}</center></td>
<td ng-hide="hide_field_available" ng-click="makeAReservation(field)" title="'Tipo'" >
<center>{{field.type}}</center></td>
</tr>
</table>
THIS IS MY JS:
if (venue.get('Access') === 'TuCancha') {
console.log(venue.get('Name') + ' HAS ACCESS');
$scope.hide_field_available = false;
$scope.hide_field_not_available = true;
}
else{
console.log(venue.get('Name') + ' DOES NOT HAVE ACCESS');
$scope.hide_field_not_available = false;
$scope.hide_field_available = true;
}
So the idea is that when Access is equal to 'TuCancha', the row should be clickable and without any additional class, if Access is something else, that row shouldn't be clickable and should have de class 'off' added to it.
What i have right now, doesn't do anything at all. Thanks a million for reading.
1 answers
solution1
1 ACCPTED 2016-05-29 00:48:54
I made an example where I use ng-class to apply or not the css class off on the row when it does not satisfy the conditions to be clickable.
Than I reuse the same validation in the callback function of ng-click on the row. You must revalidate the conditions again because the row click will still be triggered as it is not disabled. The css class off only mimic a clickable behavior on the row by showing pointer cursor and altering background color.
function DemoController($scope) { $scope.items = [ { access: 'TuChanca' }, { access: 'SomethingElse' }, ]; $scope.isRowDisabled = function(item) { // Return true to apply 'off' class return !validateItem(item); }; $scope.onRowClick = function(item) { if (validateItem(item)) { alert('Row has been click'); } }; function validateItem(item) { // Return true if item is clickable return item.access === 'TuChanca'; } }
.row { border: 1px solid #cccccc; background: #fafafa; color: rgba(0,0,0,0.87); padding: 10px; } .row:not(.off):hover { cursor: pointer; background: rgba(0,0,0,0.07); } .row.off { color: rgba(0,0,0,0.5); cursor: not-allowed; }
<html ng-app> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-controller='DemoController'> <div class="row" ng-repeat="item in items" ng-class="{ 'off': isRowDisabled(item) }" ng-click="onRowClick(item)"> {{ item.access }} </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.