如何在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