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

Question

基本上，我有一個html表，該表顯示數據庫（parse.com db）中類的某些屬性，表的每一行都是可單擊的，並觸發一個函數，我正在嘗試執行的操作是基於該值數據庫（訪問）中的一列，對其應用一個類，並使它們不可單擊。

這是我的標記：

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

這是我的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;
  }

因此，想法是，當Access等於'TuCancha'時，該行應該是可單擊的，並且沒有任何其他類，如果Access是其他東西，則該行不應是可單擊的，並且應在其上添加de class'off'。

我現在所擁有的，什么都不做。 感謝一百萬的閱讀。

Answer 1

我提出其中I使用一個例子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>

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

問題描述

1 個解決方案

解決方案1
1 已采納 2016-05-29 00:48:54

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

問題描述

1 個解決方案

解決方案1 1 已采納 2016-05-29 00:48:54

解決方案1
1 已采納 2016-05-29 00:48:54