Angularjs - 隐藏表行

我有一个表格行中的切换按钮，一旦点击，我想离开最后一次点击的行可见，同时隐藏表的所有其他行。Angularjs - 隐藏表行

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

如果标志之一为真时显示一个行： NG-节目= “{{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>

我的问题：

这只适用于placin g在toggleReadings（）函数开始处的断点和调试代码。当“正常”运行代码时，没有任何反应。我错过了什么？谢谢！

来源

2016-01-26 Udi

这看起来像使用内置['filter' filter]的好时机（https://docs.angularjs.org/ng/filter/filter） – ryanyuyu

这不会像你期望的那样工作，ng-repeat会为每一行创建一个子作用域，导致作用域继承问题与'$ scope.showAll'原语。 'toggleReadings（product）'函数实际上会在第一次单击按钮时为每行创建一个新的'$ scope.showAll'属性，并且不会影响父属性，也不会影响到目前为止创建的任何属性除了它本身以外的每一行 – Claies

这个*可以通过使用一个对象而不是原语来修复，但是像@ryanyuyu提到的那样，一个过滤器在这里比'ng-show'更有意义 – Claies

试试这个：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"

来源

2016-01-26 16:25:51 Cameron

这工作使用过滤器： “NG重复=” ... | limitto：selectedRow：rowsToDisplay“ 按钮点击发送行索引谢谢所有！

来源

2016-01-28 07:12:48 Udi

Angularjs - 隐藏表行

回答

相关问题