Question

我有三组不同的下拉菜单以及搜索框来为表格应用过滤器。如果有人在文本框（或）中输入文本，我的表格应该过滤，具体取决于在三个下拉列表中选择的值（文本框搜索和下拉搜索相互排斥）。

这是我的HTML：

    <div ng-app="myModule" ng-controller="myController">
  <nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <form class="navbar-form navbar-left form-horizontal" role="search">
          <div class="form-group">
            <label for="searchSeries" class="control-label">Find:</label>
            <input type="text" id="searchSeries" ng-model="searchText" class="form-control" placeholder="Search TV Series" />
            <div class="btn-group btn-input clearfix">
              <button type="button" class="btn btn-default dropdown-toggle form-control" data-toggle="dropdown"> <span data-bind="label">Select One</span> <span class="caret"></span> </button>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#" id="action">Action</a></li>
                <li><a href="#" id="animation">Animation</a></li>
                <li><a href="#" id="comedy">Comedy</a></li>
                <li><a href="#" id="fantasy">Fantasy</a></li>
                <li><a href="#" id="drama">Drama</a></li>
                <li><a href="#" id="mystery">Mystery</a></li>
                <li><a href="#" id="romance">Romance</a></li>
                <li><a href="#" id="science-fiction">Science Fiction</a></li>
                <li><a href="#" id="mini-series">Mini Series</a></li>
                <li><a href="#" id="reality">Reality</a></li>
                <li><a href="#" id="documentary">Documentary</a></li>
                <li><a href="#" id="crime">Crime</a></li>
                <li><a href="#" id="game-show">Game Show</a></li>
                <li><a href="#" id="talk-show">Talk Show</a></li>
                <li><a href="#" id="adventure">Adventure</a></li>
                <li><a href="#" id="home-garden">Home and Garden</a></li>
                <li><a href="#" id="thriller">Thriller</a></li>
                <li><a href="#" id="sport">Sport</a></li>
                <li><a href="#" id="family">Family</a></li>
                <li><a href="#" id="children">Children</a></li>
                <li><a href="#" id="news">News</a></li>
                <li><a href="#" id="horror">Horror</a></li>
              </ul>
            </div>
            <select ng-model="properties.config" ng-options="prop.value as prop.name for prop in properties.configs">
            </select>
            <select ng-model="order.config" ng-options="template.value as template.name for template in order.configs">
            </select>
          </div>
        </form>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
  </nav>
  <div class="container-fluid">
    <div class="table-responsive">
      <table class="table table-bordered">
        <tbody>
          <tr ng-repeat="user in users[0].tvseries | filter: searchText | filter: order.config | filter:properties.config">
            <td><img ng-src="{{user.thumbnail}}" alt="" /></td>
            <td><div>{{user.tv_show_name}}</div>
              <div>{{user.brief_description}}</div>
              <div>{{user.rating}}</div></td>
            <td><div>{{user.show_time}}</div>
              <div>{{user.genre}}</div>
              <div>{{user.current_season}}</div>
              <div>{{user.current_episode}}</div></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

我的controllers.js：

var myModule = angular.module('myModule', []);
myModule.controller('myController', function($scope, userRepository) {
    userRepository.getAllUsers().success(function(users) {$scope.users = users;});
    $scope.order = {};
    $scope.properties = {};
      //Configuration
      $scope.order.configs = [
                                 {'name': 'Ascending',
                                  'value': 'tv_show_name'},
                                 {'name': 'Descending',
                                  'value': '-tv_show_name'}
                               ];
      $scope.properties.configs = [
                                 {'name': 'Show Time',
                                  'value': 'show_time'},
                                 {'name': 'Rating',
                                  'value': 'rating'}
                               ];
      //Setting first option as selected in configuration select
      $scope.order.config = $scope.order.configs[0].value;
      $scope.properties.config = $scope.properties.configs[0].value;
});
myModule.factory('userRepository', function($http) {
    return {
        getAllUsers: function() {
            var url = "https://api.mongolab.com/api/1/databases/tvshowsdb/collections/tvshowsdbcollections?apiKey=e2SbmkVmLOQN-wH_ga84n9prYsgU8lQ5";
            return $http.get(url);
        }
    };
});

请注意：当我在我的html中应用“filter：searchText”时，它运行正常，我没有遇到任何问题。但是当我尝试再应用两个过滤器“filter：order.config | filter：properties.config”时，我的代码就不会执行了。请帮我理解我出错的地方:(

Answer 1

由于您要在-之前添加和删除tv_show_name，我认为您正在尝试sort the results by multiple fields？如果是这种情况，则语法为：
orderBy: [order.config, properties.config]。

以下是演示：http://plnkr.co/edit/yLYQGYGcGZMqoj6yfqoT?p=preview

注意：演示是从json文件而不是mongolab api读取的，因为我需要添加重复的名称和开始时间，以显示多级排序的效果。另外，请注意我更改了选择的顺序以匹配您应用过滤器的顺序。我认为第一个选择优先于下一个选择是直观的。

<强>更新
如果您只想一次按其中一个选项排序，则可以使用字符串变量，就像orderBy api demo：

<div ng-click="predicate = 'tv_show_name'">Show Name ascending</div>
<div ng-click="predicate = '-tv_show_name'">Show Name descending</div>
<div ng-click="predicate = 'show_time'">Show Time</div>
<div ng-click="predicate = 'rating'">Rating</div>
...
<tr ng-repeat="user in users[0].tvseries | filter: searchText | orderBy:predicate">

以下是更新后的Demo

Angular JS - 需要根据页面上的不同下拉列表应用不同的过滤器（对于表格）

1 个答案: