CODEWITHSUNDEEP
angularjs
Priya
Priya

Reputation: 141

Hide table rows in angular Js

I have a table, I am already given it CSS using ng-class if they satisfy a condition. Now I want to show only those rows who satisfy the same condition on a button click. I have wrote a controller which checks if the data received is within 24 hours are not and marks the data cell. Until this it's working.Now I need to add a button and show only the row which has this td marked as not received in time.

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

Upvotes: 1

Views: 3038

Answers (3)

Vin
Vin

Reputation: 6145

You could also use an ng-if rather than ng-show. See the differences here.

Really depends on how often the hide/show toggle needs to happen.

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

and then in the controller,

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

I wrote this demo on Codepen. Hope that helps.

Upvotes: 0

Tevin Joseph K O
Tevin Joseph K O

Reputation: 2654

From the information provided in question what I can say is: Use ng-show to show rows based on your condition.

    <tr ng-show ="your_condition">

Upvotes: 1

GPicazo
GPicazo

Reputation: 6676

I think something like this should work. Basically, clicking the button will toggle between showing all or only the items marked as 'data not received'.

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

Upvotes: 1

Related Questions