Скрыть строки таблицы в угловом Js

Question

У меня есть таблица, мне уже присвоен CSS, используя ng-класс, если они удовлетворяют условию. Теперь я хочу показать только те строки, которые удовлетворяют одному и тому же условию при нажатии кнопки. Я написал контроллер, который проверяет, не получены ли данные в течение 24 часов и маркирует ячейку данных. Пока это не работает. Теперь мне нужно добавить кнопку и показать только строку, у которой этот тд отмечен как не полученный вовремя.

<tbody> 

     <tr ng-repeat ="data in log"> 
      <td>{{data.UniqueId}}</td> 
      <td>{{data.Name}}</td> 
      <td ng-class ="{'data-notreceived' : dataNotReceived('data.receivedTime')}">{{data.receivedTime 
     }} 
     </tbody> 
    </table> 

Answer 1

Я думаю, что что-то подобное должно работать. В основном, нажатие кнопки будет переключаться между отображением всех или только элементов, помеченных как «данные не получены».

<tbody> 
    <tr ng-repeat ="data in log" ng-show="showAll || dataNotReceived(data.receivedTime)"> 
    <td>{{data.UniqueId}}</td> 
    <td>{{data.Name}}</td> 
    <td ng-class ="{'data-notreceived' : dataNotReceived('data.receivedTime')}">{{data.receivedTime}} 
    </tr> 
</tbody> 

// in controller 
$scope.showAll = true; 

$scope.onButtonClick = function() { 
    $scope.showAll = !$scope.showAll; 
    return false; 
} 

Answer 2

Из представленной информации, что я могу сказать: Используйте ng-show для отображения строк на основе вашего состояния.

<tr ng-show ="your_condition"> 

Answer 3

Вы также могли бы использовать нг-если вместо нг-шоу. См. Различия here.

Действительно зависит от того, как часто должно происходить переключение hide/show.

<tbody> 
     <tr ng-repeat="data in log" ng-if="showLast24Hrs(data.ReceivedTime)"> 
      <td>{{data.UniqueId}}</td> 
      <td>{{data.Name}}</td> 
      <td>{{data.ReceivedTime}}</td> 
     </tbody> 

, а затем в контроллере,

$scope.showLast24Hrs = function(receivedTime){ 
    if($scope.isLast24Hours) { 
     return receivedTime < 200; // Write your less than 24 hours check here 
    } 
    return true; 
    } 

Я написал эту demo on Codepen. Надеюсь, это поможет.