gpt4 book ai didi

javascript - 过滤以显示/隐藏具有空列单元格值的 Bootstrap 表行

转载 作者:行者123 更新时间:2023-11-30 20:39:36 25 4
gpt4 key购买 nike

我正在使用 MEAN 堆栈开发一个 Web 应用程序,它包含 1 个表(bootstrap)和 2 列和多行。 Column 1 将包含每一行的数据,但 Column 2 不需要。 enter image description here

我想放置一个过滤器,例如 Mapped(在两列中显示具有值的行)、UnMapped(仅在第一列中显示具有值的行)和 全部(显示所有行)。过滤器将作为下拉列表中的选项提供:

 <select class="selectpicker form-control">
<option value="All">All</option>
<option value="Mapped">Mapped</option>
<option value="UnMapped">Un-Mapped</option>
</select>

我尝试了不同的解决方案来过滤表,但无法找到针对上述情况的解决方案。请帮忙。

这是 JS Fiddle :

最佳答案

试试这个

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<select class="selectpicker form-control" ng-model="test">
<option value="All">All</option>
<option value="Mapped">Mapped</option>
<option value="UnMapped">Un-Mapped</option>
</select>
<ul>
<li ng-repeat="x in names | filter:emptyOrNull">
{{ x.name }}
</li>
</ul>
</div>

<script>
angular.module('myApp', []).controller('namesCtrl', function ($scope) {
$scope.test = 'All';
$scope.names = [{
name: 'Mapped',
address: 'SomeData'
},
{
name: 'UnMapped'
},
];

$scope.emptyOrNull = function (item) {
if ($scope.test == "All")
return true;
if ($scope.test == "Mapped")
return item.name && item.address
if ($scope.test == "UnMapped")
return !(item.address) ;
}
});
</script>
</body>
</html>

关于javascript - 过滤以显示/隐藏具有空列单元格值的 Bootstrap 表行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49425447/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com