Question

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

使用两个标志完成：'showAll'（全局）和'showGridRow'-每行。

如果其中一个标志为true，则显示一行： 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"

Answer 2

这使用过滤器： “ng-repeat =”... | limitto：selectedRow：rowsToDisplay” 按钮单击发送行索引。谢谢大家！

Angularjs - 隐藏表格行

2 个答案: