Question

基本上，我有一个html表，显示了我的数据库（parse.com数据库）中某个类的一些属性，我的表的每一行都是可点击的并触发一个函数，我正在尝试做的，是基于对于我的db（Access）中的列的值，将类应用于它们并使它们不可单击。

这是我的标记：

$fetchAll = function ($id) use (&$pdo) {
    $stmt = $pdo->prepare("SELECT * FROM `status` WHERE `status_id` = ?");
    $stmt->execute([$id]);
    return $stmt->fetchAll(PDO::FETCH_ASSOC);
}; 
print_r($fetchAll($id));

这是我的JS：

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

所以我的想法是，当Access等于'TuCancha'时，该行应该是可点击的，没有任何其他类，如果Access是别的，那么该行不应该是可点击的并且应该添加de class'off'它。

我现在所拥有的，根本没有做任何事情。万分感谢阅读。

Answer 1

我做了一个例子，当我不满足要点击的条件时，我使用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 个答案: