角度表和过滤空列答案

【问题标题】：Angular Table and filtering empty columns角度表和过滤空列
【发布时间】：2015-06-08 05:51:11
【问题描述】：

我正在使用 this 教程使用 Angular 构建可排序、可搜索的表格。

我要做的只是在用户搜索时只显示至少包含一个条目的列。所以基本上，如果该列为空，则不显示该列。

例如，在我的代码sn-p中，如果用户搜索“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>

【问题讨论】：

标签： javascript angularjs

【解决方案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>

【讨论】：

完美。感谢您的帮助！