Hide table rows in angular Js

Question

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>

Show us your code. Your question as it is right now is vary vague, what is the condition? — yvesmancera
– yvesmancera, Commented Sep 4, 2015 at 18:28
@Priya. Welcome to SO. Will you please share your controller code as well ? — Vineet
– Vineet, Commented Sep 4, 2015 at 18:39

GPicazo · Accepted Answer · 2015-09-04 18:50:09Z

1

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

answered Sep 4, 2015 at 18:50

GPicazo

6,7263 gold badges23 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Priya Over a year ago

Thanks @GPicazo, but i am facing this issue error: [$rootscope:infdig] 10 $digest() iterations reached.

Priya Over a year ago

Thanks for this , but now i am stuck with another button where I have to show rows which do not satisfy the condition. @GPicazo

Tevin Joseph K O · Accepted Answer · 2015-09-04 18:53:21Z

1

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

edited Sep 4, 2015 at 18:53

answered Sep 4, 2015 at 18:45

Tevin Joseph K O

2,65424 silver badges25 bronze badges

2 Comments

Priya Over a year ago

Thanks, I am trying the same but facing angular issue error: [$rootscope:infdig] 10 $digest() iterations reached

Tevin Joseph K O Over a year ago

@Priya I hope this addresses similar situation: stackoverflow.com/questions/14376879/…

Vin · Accepted Answer · 2015-09-04 22:06:31Z

0

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.

answered Sep 4, 2015 at 22:06

Vin

6,1754 gold badges45 silver badges57 bronze badges

Collectives™ on Stack Overflow

Hide table rows in angular Js

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related