如何在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. 基本上，我有一个html表，该表显示数据库（parse.com db）中类的某些属性，表的每一行都是可单击的，并触发一个函数，我正在尝试执行的操作是基于该值数据库（访问）中的一列，对其应用一个类，并使它们不可单击。

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: 这是我的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. 因此，想法是，当Access等于'TuCancha'时，该行应该是可单击的，并且没有任何其他类，如果Access是其他东西，则该行不应是可单击的，并且应在其上添加de class'off'。

What i have right now, doesn't do anything at all. 我现在所拥有的，什么都不做。 Thanks a million for reading. 感谢一百万的阅读。

Answer 1

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. 我提出其中I使用一个例子ng-class来应用或不css类off上的行，当它不满足条件可点击。

Than I reuse the same validation in the callback function of ng-click on the row. 比起在ng-click行的回调函数中重用相同的验证 。 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. 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