如何在Angular上顯示和隱藏表格行？

基本上，我有一個html表格，顯示了我的數據庫（parse.com數據庫）的一個類的一些屬性，我的表的每一行都是可點擊的，並觸發一個函數，我試圖做的是基於來自我的數據庫（Access）的列的值，向它們應用一個類並使它們不可點擊。如何在Angular上顯示和隱藏表格行？

THIS IS我的標記：

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

這樣的想法是，當訪問等於 'TuCancha'，該行可點擊以及沒有任何額外的類，如果Access是別的東西，那行不應該是可點擊的，並且應該將de類添加到它。

我現在擁有什麼，什麼都不做。感謝百萬人的閱讀。

來源

2016-05-28 Sebastian Delgado

注意''

標籤已經過時......使用CSS代替 – charlietfl

我做了一個例子，當它不滿足可點擊條件時，我使用ng-class在行上應用或不應用css類off。

比我重複使用相同驗證在行上的ng-click的回調函數。您必須再次驗證條件，因爲行點擊仍然會被觸發，因爲它未被禁用。 css類off僅通過顯示指針光標和更改背景色來模擬行上的可點擊行爲。

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>

來源

2016-05-29 00:48:54 j3ff

非常感謝你的幫助。 –

如何在Angular上顯示和隱藏表格行？

回答

相關問題