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, Sep 04 '15 at 18:28
@Priya. Welcome to `SO`. Will you please share your controller code as well ? — Vineet, Sep 04 '15 at 18:39

Tevin Joseph K O · Answer 1 · 2015-09-04T18:53:21.617

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 04 '15 at 18:53

answered Sep 04 '15 at 18:45

Tevin Joseph K O

2,574
22
24

Thanks, I am trying the same but facing angular issue error: [$rootscope:infdig] 10 $digest() iterations reached – Priya Sep 04 '15 at 19:23
@Priya I hope this addresses similar situation: http://stackoverflow.com/questions/14376879/error-10-digest-iterations-reached-aborting-with-dynamic-sortby-predicate – Tevin Joseph K O Sep 04 '15 at 19:27

score 1 · Accepted Answer · answered Sep 04 '15 at 18:50

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 04 '15 at 18:50

GPicazo

6,516
3
21
24

Thanks @GPicazo, but i am facing this issue error: [$rootscope:infdig] 10 $digest() iterations reached. – Priya Sep 04 '15 at 19:22
Thanks for this , but now i am stuck with another button where I have to show rows which do not satisfy the condition. @GPicazo – Priya Sep 08 '15 at 19:10

score 0 · Answer 3 · answered Sep 04 '15 at 22:06

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.

Hide table rows in angular Js

3 Answers3