1. 首頁
  2. 問答
  3. 角度表和過濾空列

角度表和過濾空列

2015-06-07 84 views
0

我使用this教程使用角度構建可排序，可搜索的表。角度表和過濾空列

我想要做的只是顯示在用戶搜索時至少有一個條目的列。所以基本上，如果列是空的，不要顯示該列。

例如，在我的代碼片段中，如果用戶搜索「XFish」，我不希望「Fish Type」列出現;如果用戶輸入「YFish」，我不想顯示「測試級別」列。我只是在學習角度，所以我不確定這是否可能。

angular.module('sortApp', []) 
 

 
.controller('mainController', function($scope) { 
 
    $scope.sortType  = 'name'; // set the default sort type 
 
    $scope.sortReverse = false; // set the default sort order 
 
    $scope.searchFish = '';  // set the default search/filter term 
 

 
    // create the list of sushi rolls 
 
    $scope.sushi = [ 
 
    { name: 'Cali Roll', fish: 'Crab', tastiness: 2 }, 
 
    { name: 'Philly', fish: 'Tuna', tastiness: 4 }, 
 
    { name: 'Tiger', fish: 'Eel', tastiness: 7 }, 
 
    { name: 'Rainbow', fish: 'Variety', tastiness: 6 }, 
 
    { name: 'XFish', tastiness: 6 }, 
 
    { name: 'YFish', fish: 'Variety' } 
 
    ]; 
 

 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<!-- index.html --> 
 

 
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Angular Sort and Filter</title> 
 

 
    <!-- CSS --> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/sandstone/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"> 
 
    <style> 
 
     body { padding-top:50px; } 
 
    </style> 
 

 
    <!-- JS --> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 

 
</head> 
 
<body> 
 
    <div class="container" ng-app="sortApp" ng-controller="mainController"> 
 

 
    <div class="alert alert-info"> 
 
     <p>Sort Type: {{ sortType }}</p> 
 
     <p>Sort Reverse: {{ sortReverse }}</p> 
 
     <p>Search Query: {{ searchFish }}</p> 
 
    </div> 
 

 
    <form> 
 
     <div class="form-group"> 
 
     <div class="input-group"> 
 
      <div class="input-group-addon"><i class="fa fa-search"></i></div> 
 
      <input type="text" class="form-control" placeholder="Search da Fish" ng-model="searchFish"> 
 
     </div> 
 
     </div> 
 
    </form> 
 

 
    <table class="table table-bordered table-striped"> 
 

 
     <thead> 
 
     <tr> 
 
      <td> 
 
      <a href="#" ng-click="sortType = 'name'; sortReverse = !sortReverse"> 
 
       Sushi Roll 
 
       <span ng-show="sortType == 'name' && !sortReverse" class="fa fa-caret-down"></span> 
 
       <span ng-show="sortType == 'name' && sortReverse" class="fa fa-caret-up"></span> 
 
      </a> 
 
      </td> 
 
      <td> 
 
      <a href="#" ng-click="sortType = 'fish'; sortReverse = !sortReverse"> 
 
      Fish Type 
 
       <span ng-show="sortType == 'fish' && !sortReverse" class="fa fa-caret-down"></span> 
 
       <span ng-show="sortType == 'fish' && sortReverse" class="fa fa-caret-up"></span> 
 
      </a> 
 
      </td> 
 
      <td> 
 
      <a href="#" ng-click="sortType = 'tastiness'; sortReverse = !sortReverse"> 
 
      Taste Level 
 
       <span ng-show="sortType == 'tastiness' && !sortReverse" class="fa fa-caret-down"></span> 
 
       <span ng-show="sortType == 'tastiness' && sortReverse" class="fa fa-caret-up"></span> 
 
      </a> 
 
      </td> 
 
     </tr> 
 
     </thead> 
 

 
     <tbody> 
 
     <tr ng-repeat="roll in sushi | orderBy:sortType:sortReverse | filter:searchFish"> 
 
      <td>{{ roll.name }}</td> 
 
      <td>{{ roll.fish }}</td> 
 
      <td>{{ roll.tastiness }}</td> 
 
     </tr> 
 
     </tbody> 
 

 
    </table> 
 

 
    <p class="text-center text-muted"> 
 
     <a href="#" target="_blank">Read the Tutorial</a> 
 
    </p> 
 

 
    <p class="text-center"> 
 
     by <a href="http://scotch.io" target="_blank">scotch.io</a> 
 
    </p> 
 

 
    </div> 
 
</body> 
 
</html>

來源

2015-06-07 systemoutprintln

回答

1

下面是一些作品。關鍵是在這裏：

$scope.hasField = function(fieldName) { 
    var filtered = $filter('filter')($scope.sushi, $scope.searchFish); 

    return filtered.some(function(roll){ 
    return typeof roll[fieldName] !== 'undefined'; 
    }); 
}

注意Array.prototype.some不可低於IE9，但我認爲這是可以接受的。

angular.module('sortApp', []) 
 

 
.controller('mainController', function($scope, $filter) { 
 
    $scope.sortType  = 'name'; // set the default sort type 
 
    $scope.sortReverse = false; // set the default sort order 
 
    $scope.searchFish = '';  // set the default search/filter term 
 

 
    // create the list of sushi rolls 
 
    $scope.sushi = [ 
 
    { name: 'Cali Roll', fish: 'Crab', tastiness: 2 }, 
 
    { name: 'Philly', fish: 'Tuna', tastiness: 4 }, 
 
    { name: 'Tiger', fish: 'Eel', tastiness: 7 }, 
 
    { name: 'Rainbow', fish: 'Variety', tastiness: 6 }, 
 
    { name: 'XFish', tastiness: 6 }, 
 
    { name: 'YFish', fish: 'Variety' } 
 
    ]; 
 

 

 
    $scope.hasField = function(fieldName) { 
 
    var filtered = $filter('filter')($scope.sushi, $scope.searchFish); 
 
    
 
    return filtered.some(function(roll){ 
 
     return typeof roll[fieldName] !== 'undefined'; 
 
    }); 
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<!-- index.html --> 
 

 
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Angular Sort and Filter</title> 
 

 
    <!-- CSS --> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/sandstone/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"> 
 
    <style> 
 
     body { padding-top:50px; } 
 
    </style> 
 

 
    <!-- JS --> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 

 
</head> 
 
<body> 
 
    <div class="container" ng-app="sortApp" ng-controller="mainController"> 
 

 
    <div class="alert alert-info"> 
 
     <p>Sort Type: {{ sortType }}</p> 
 
     <p>Sort Reverse: {{ sortReverse }}</p> 
 
     <p>Search Query: {{ searchFish }}</p> 
 
    </div> 
 

 
    <form> 
 
     <div class="form-group"> 
 
     <div class="input-group"> 
 
      <div class="input-group-addon"><i class="fa fa-search"></i></div> 
 
      <input type="text" class="form-control" placeholder="Search da Fish" ng-model="searchFish"> 
 
     </div> 
 
     </div> 
 
    </form> 
 

 
    <table class="table table-bordered table-striped"> 
 

 
     <thead> 
 
     <tr> 
 
      <td> 
 
      <a href="#" ng-click="sortType = 'name'; sortReverse = !sortReverse"> 
 
       Sushi Roll 
 
       <span ng-show="sortType == 'name' && !sortReverse" class="fa fa-caret-down"></span> 
 
       <span ng-show="sortType == 'name' && sortReverse" class="fa fa-caret-up"></span> 
 
      </a> 
 
      </td> 
 
      <td ng-show="hasField('fish')"> 
 
      <a href="#" ng-click="sortType = 'fish'; sortReverse = !sortReverse"> 
 
      Fish Type 
 
       <span ng-show="sortType == 'fish' && !sortReverse" class="fa fa-caret-down"></span> 
 
       <span ng-show="sortType == 'fish' && sortReverse" class="fa fa-caret-up"></span> 
 
      </a> 
 
      </td> 
 
      <td ng-show="hasField('tastiness')"> 
 
      <a href="#" ng-click="sortType = 'tastiness'; sortReverse = !sortReverse"> 
 
      Taste Level 
 
       <span ng-show="sortType == 'tastiness' && !sortReverse" class="fa fa-caret-down"></span> 
 
       <span ng-show="sortType == 'tastiness' && sortReverse" class="fa fa-caret-up"></span> 
 
      </a> 
 
      </td> 
 
     </tr> 
 
     </thead> 
 

 
     <tbody> 
 
     <tr ng-repeat="roll in sushi | orderBy:sortType:sortReverse | filter:searchFish"> 
 
      <td>{{ roll.name }}</td> 
 
      <td ng-show="hasField('fish')">{{ roll.fish }}</td> 
 
      <td ng-show="hasField('tastiness')">{{ roll.tastiness }}</td> 
 
     </tr> 
 
     </tbody> 
 

 
    </table> 
 

 
    <p class="text-center text-muted"> 
 
     <a href="#" target="_blank">Read the Tutorial</a> 
 
    </p> 
 

 
    <p class="text-center"> 
 
     by <a href="http://scotch.io" target="_blank">scotch.io</a> 
 
    </p> 
 

 
    </div> 
 
</body> 
 
</html>

來源

2015-06-07 21:51:11

+0

完美。謝謝您的幫助！ – systemoutprintln

相關問題

 相關問題