Как показать и скрыть строку таблицы на Angular?

Question

Как показать и скрыть строку таблицы на Angular?

0

В принципе, у меня есть html-таблица, которая показывает некоторые атрибуты класса из моей базы данных (parse.com db), каждая строка моей таблицы является интерактивной и запускает функцию, что я пытаюсь сделать, это то, что на основе значения столбца из моего db (Access), примените к ним класс и сделайте их недоступными для кликов.

ЭТО МОЙ МАРКУП:

      <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 является чем-то другим, эта строка не должна быть кликабельной и должна иметь добавленный класс.

То, что я имею сейчас, ничего не делает. Спасибо миллион за чтение.

Sebastian Delgado 29 май 2016, в 01:50

Источник

1

Обратите внимание, что <center> устарел ... используйте вместо него css
charlietfl 29 май 2016, в 04:47

Теги:

javascript

jquery

html

angularjs

css

1 ответ

Ещё вопросы

Обратите внимание, что <center> устарел ... используйте вместо него css

j3ff · Accepted Answer · 2016-05-28T23-43-00.000Z

Я привел пример, где я использую 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>