Filter to show/hide bootstrap table rows with empt

2019-07-29 12:47发布

站内问答 / JavaScript
1480 1 6

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. enter image description here

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条回答
女痞
2楼-- · 2019-07-29 13:23

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>

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)