[英]Hide all table rows except clicked row AngularJS
I have a table that is populated with ng-repeat. 我有一个用ng-repeat填充的表。 When the row is clicked I am retrieving the data related to the object with ng-click.
单击该行后,我将使用ng-click检索与该对象有关的数据。 The table is populated with a json file.
该表中填充了一个json文件。 How can I hide all of the other rows of the table when the selected row is clicked?
单击所选行时,如何隐藏表的所有其他行?
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
</thead>
<tbody style="cursor: pointer" ng-cloak> <!--When the row is clicked, I want to hide all other rows except the clicked one.-->
<tr ng-repeat="person in people" ng-click="getSelected(person);">
<td>{{ person.firstName }}</td>
<td>{{ person.lastName }}</td>
<td>{{ person.age }}</td>
</tr>
</tbody>
</table>
<script>
angular.module("App", []).controller("MainController", function ($scope) {
$scope.people = peopleData;
$scope.getSelected = function (person) {
$scope.selected = person;
};
});
</script>
You could just set an ng-hide
value on unselected rows when a selected value has been set: 设置选定值后,您可以仅在未选定的行上设置
ng-hide
值:
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
</thead>
<tbody style="cursor: pointer" ng-cloak ng-repeat="person in people"> <!--When the row is clicked, I want to hide all other rows except the clicked one.-->
<tr ng-hide="selected!==null && person!==selected" ng-click="getSelected(person);">
<td>{{ person.firstName }}</td>
<td>{{ person.lastName }}</td>
<td>{{ person.age }}</td>
</tr>
</tbody>
</table>
<script>
angular.module("App", []).controller("MainController", function ($scope) {
$scope.people = peopleData;
$scope.selected = null;
$scope.getSelected = function (person) {
$scope.selected = person;
};
});
</script>
You will also probably want to move the ng-repeat
as I did in the code above. 您可能也想像上面的代码一样移动
ng-repeat
。
Try adding the following to your <tr>
. 尝试将以下内容添加到您的
<tr>
。 It basically says, hide this row if there is a selection and that selection isn't the current person being iterated over. 它的基本含义是,如果有选择并且该选择不是要迭代的当前人员,则隐藏此行。
ng-hide="selected && selected !== person"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.