我使用{{3}}教程使用angular构建可排序，可搜索的表格。
我尝试做的只是显示用户搜索时至少有一个条目的列。所以基本上，如果列是空的，则不要显示该列。
例如，在我的代码段中，如果用户搜索＆＃34; XFish＆＃34;，我不希望＆＃34; Fish Type＆＃34;列出现;如果用户输入＆＃34; YFish＆＃34;我不想要＆＃34;测试等级＆＃34;列出现。我只是学习角度，所以我不确定这是否可行。
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>
答案 0 :(得分：1)
这是有效的。关键在这里：
$scope.hasField = function(fieldName) {
var filtered = $filter('filter')($scope.sushi, $scope.searchFish);
return filtered.some(function(roll){
return typeof roll[fieldName] !== 'undefined';
});
}
请注意，IE9下方不提供Array.prototype.some，但我认为这是可以接受的。
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>