CODEWITHSUNDEEP
javascriptangularjs
Udi
Udi

Reputation: 21

Angularjs - Hiding table rows

I have a toggle button in a table row, once clicked, I'd like to leave the last clicked row visible, while hiding all other rows of the table.

This is done using two flags: 'showAll' (global) and 'showGridRow'- per row.

A row is displayed if one of the flags is true: ng-show="{{showAll}}||product.showGridRow"

code:

$scope.showAll = showAll;

$scope.toggleReadings = function toggleReadings(product) {
  if (product.showGridRow == undefined) {
    //if undefined, this is first click - set to false so it will be enabled immediatelly
    product.showGridRow = false;
  }

  product.showGridRow = !product.showGridRow;
  //if true, hide all others, else show all
  showAll = !product.showGridRow;

};
<table class="table table-striped">
  <thead>
    <tr>
      <th>Product ID</th>
      <th>Product Name</th>
      <th>Topic</th>
      <th>Active</th>
      <th>Readings</th>
    </tr>
  </thead>
  <tbody>                      
    <tr ng-repeat="product in products" ng-show="{{showAll}}||product.showGridRow">
      <td>{{product.productId}}</td>
      <td>{{product.productName}}</td>
      <td>{{product.topic}}</td>
      <td>{{product.Active}}</td>
      <td>
        <input type="button" value="..." ng-click="toggleReadings(product)" >
      </td>
    </tr>
  </tbody>
</table>

My Question:

This works only when placing a breakpoint at the beginning of the toggleReadings() function and debugging the code. While running the code "normally" nothing happens. What am I missing? Thanks!

Upvotes: 2

Views: 152

Answers (2)

Udi
Udi

Reputation: 21

This worked using filters: "ng-repeat="... | limitto:selectedRow:rowsToDisplay" while the button click sends row index. Thanks all!

Upvotes: 0

Cameron
Cameron

Reputation: 434

Try this: https://jsfiddle.net/o5aofze1/

$scope.showAll = true;
$scope.products = [{
  productId: 2,
  productName: 'asd',
  topic: '123',
  Active: 'true'
}, {
  productId: 3,
  productName: 'asdada',
  topic: '213123',
  Active: 'false'
}]

$scope.toggleReadings = function toggleReadings(product) {
  if ($scope.productToShow == product) {
    $scope.productToShow = undefined;
  } else {
    $scope.productToShow = product;
  }

  $scope.showAll = !$scope.productToShow;

};

With the filter being: ng-show="showAll||productToShow == product"

Upvotes: 1

Related Questions