Angular JS - 페이지에 다른 드롭 다운에 따라 다른 필터를 적용해야합니다.

Question

드롭 다운 세 세트가 있고 테이블에 필터를 적용 할 검색 상자가 있습니다. 누군가가 텍스트 상자에 텍스트를 입력하면 (또는) 텍스트 드롭 다운 (텍스트 검색 및 드롭 다운 검색이 서로 배제 됨) 중 하나에서 선택한 값에 따라 내 표가 필터링됩니다.

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

이

내 HTML입니다

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 : order.config | filter : properties.config"를 적용하려고하면 코드가 실행되지 않습니다. ? 내가 잘못거야 어디 :(

Answer 1

당신이 추가하고 tv_show_name 전에 -을 제거하기 때문에, 당신이 sort the results by multiple fields하려고하는 생각 그런 경우, 구문이 될 것 나를 이해하는 데 도움이 바랍니다 :
. http://plnkr.co/edit/yLYQGYGcGZMqoj6yfqoT?p=preview

참고 : orderBy: [order.config, properties.config] 여기

는 데모입니다 내가 다의 효과를 보여주기 위해 시간을 중복 된 이름을 추가하고 시작하는 데 필요한 때문에 데모는 대신 mongolab API를하는 JSON 파일에서 읽고 수준별 정렬. 나는 필터의 적용 순서와 일치하도록 셀렉트 순서를 변경했다. 첫 번째 선택이 다음 선택보다 우선한다는 것이 직관적이라고 생각합니다. 당신이 한 번에 옵션 중 하나를 기준으로 정렬하려면

---

업데이트하는 것은
, 당신은 많은 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