javascript - Angularjs - 隐藏表格行

Question

我在表格行中有一个切换按钮，点击后，我想让最后点击的行可见，同时隐藏表格的所有其他行。

这是使用两个标志完成的:“showAll”(全局)和“showGridRow”- 每行。

如果其中一个标志为真，则显示一行: ng-show="{{showAll}}||product.showGridRow"

代码:

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

我的问题:

仅当在 toggleReadings() 函数的开头放置断点并调试代码时，这才有效。 “正常”运行代码时没有任何反应。 我错过了什么？ 谢谢!

Answer 1

试试这个: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;

};

过滤器为:ng-show="showAll||productToShow == product"