筛选以显示/隐藏具有空列单元格值的引导程序表行 [英] Filter to show/hide bootstrap table rows with empty column cell value
问题描述
我正在开发一个使用MEAN堆栈的Web应用程序，该堆栈包含1个表(引导程序)，2列和多行. Column 1将具有每一行的数据，但对于Column 2则不是必需的.
I am developing a web application using MEAN stack which contains 1 table(bootstrap) with 2 column and multiple rows. Column 1 will have data for every single row but not necessary for Column 2.
我想放置一个过滤器，例如Mapped(在两列中显示均具有值的行)，UnMapped(在第一列中显示均具有值的行)和All(显示所有行).过滤器将作为下拉菜单中的选项提供:
I want to put a filter like Mapped(show rows with values in both column) ,UnMapped(show rows with value in only first column) and All(show all rows). The filters will be given as option in drop down as:
<select class="selectpicker form-control">
<option value="All">All</option>
<option value="Mapped">Mapped</option>
<option value="UnMapped">Un-Mapped</option>
</select>
我尝试了不同的解决方案来过滤表，但是无法找出上述情况的解决方案.请帮忙.
I tried different solutions to filter table but unable to figure out solution for above scenario. Please Help.
这是 JS小提琴:
推荐答案
尝试一下
<!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>
这篇关于筛选以显示/隐藏具有空列单元格值的引导程序表行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
