Filter to show/hide bootstrap table rows with empt

2019-07-29 13:08发布

问题:

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.

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.

Here is the JS Fiddle:

回答1:

Try this

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