Question

我正在使用MEAN堆栈开发一个Web应用程序，其中包含1个表（引导程序），其中包含2列和多行。 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>

我尝试了不同的解决方案来过滤表，但无法找出上述方案的解决方案。请帮助。

以下是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>

过滤以显示/隐藏具有空列单元格值

1 个答案: