个人中心
gpt4 book ai didi

javascript - Angular Table 和过滤空列

转载 作者：行者123 更新时间：2023-12-03 09:57:02 25 4
gpt4 key购买 nike

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

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

例如，在我的代码片段中，如果用户搜索“XFish”，我不希望出现“Fish Type”列；如果用户输入“YFish”，我不希望出现“测试级别”列。我刚刚学习 Angular ，所以我不确定这是否可能。

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>

最佳答案

这是有效的。关键在这里:

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

关于javascript - Angular Table 和过滤空列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30698700/

25 4 0
文章推荐： javascript - 从外部访问二维数组中的 Google map 标记
文章推荐： kubernetes - 定义 Kubernetes 命名空间和标签的最佳实践
文章推荐： sql-server - 聚合函数返回 null
文章推荐： 自调用时 JavaScript slider 函数不工作
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com