筛选出具有空列单元格值的 show/hide bootstrap table 行

Question

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

我想放置一个过滤器，例如 Mapped（在两列中显示具有值的行），UnMapped（仅在第一列中显示具有值的行）和 All（显示所有行）。过滤器将在下拉列表中作为选项提供：

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

我尝试了不同的解决方案来过滤 table 但无法找到上述情况的解决方案。请帮助。

这里是JS Fiddle：

Answer 1

试试这个

<!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>

筛选出具有空列单元格值的 show/hide bootstrap table 行

Filter to show/hide bootstrap table rows with empty column cell value

javascript

twitter-bootstrap

angularjs

mean-stack