1

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>
Priya
  • 141
  • 1
  • 4
  • 14

3 Answers3

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

Vin
  • 6,115
  • 4
  • 41
  • 55