공통 필터가있는 여러 필드에서 검색 필터가 작동하지 않습니다.

개체의 다양한 속성을 통해 개별적으로 검색을 필터링 할 수있는 검색 상자를 만들려고합니다.공통 필터가있는 여러 필드에서 검색 필터가 작동하지 않습니다.

<!DOCTYPE html> 
<html ng-app="m1"> 
    <head> 
    <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js'></script> 
    </head> 
    <body ng-controller="c1"> 
    <div> 
     Filter 
     <select ng-model="filterKey"> 
     <option value="bookId">By Id</option> 
     <option value="bookTitle">By Title</option> 
     <option value="author">By Author</option> 
     <option value="cost">By Cost</option> 
     </select> 
     <input type="text" ng-model="filterValue"> 
    </div> 
    <table> 
     <tr> 
     <th>SI. No.</th> 
     <th>Details</th> 
     </tr> 
     <tr custom-tr ng-repeat="book in books | filter: bookFilter(filterKey, filterValue)"> 
     <td>{{ $index + 1 }}</td> 
     <td> 
      <table> 
      <tr> 
       <td>Book ID:</td> 
       <td>{{book.bookId}}</td> 
      </tr> 
      <tr> 
       <td>Book Title:</td> 
       <td>{{book.bookTitle}}</td> 
      </tr> 
      <tr> 
       <td>Book Author:</td> 
       <td>{{book.author}}</td> 
      </tr> 
      <tr> 
       <td>Book Cost:</td> 
       <td>{{book.cost}}</td> 
      </tr> 
      </table> 
     </td> 
     </tr> 
    </table> 
    </body> 
    <script type="text/javascript"> 
    var m1 = angular.module("m1", []); 

    m1.controller('c1',function($scope) 
    { 
     $scope.books = [ 
     { 
      "bookId": 101, 
      "bookTitle": "Angular JS", 
      "author": "Green", 
      "cost":375, 
     }, 
     { 
      "bookId": 102, 
      "bookTitle": "Instant AngularJS Starter", 
      "author": "Dan Menard", 
      "cost":150, 
     }, 
     { 
      "bookId": 103, 
      "bookTitle": "Ng-Book: The Complete Book on AngularJS", 
      "author": "Ari Lerner", 
      "cost":4657, 
     }]; 

     $scope.bookFilter = function(filterKey, filterValue) 
     { 
     return function(book) 
     { 
      if(!filterKey || !filterValue) 
      { 
      return true; 
      } 
      // Emulating the built-in search algorithm 
      return String(book[filterKey]).toLowerCase().includes(filterValue.toLowerCase()); 
     }; 
     }; 
    }); 
    </script> 
</html>

내가 (수동 검색 알고리즘을 작성하지 않고 쓸 필요없이 같은 일을하고 싶습니다 내 현재 솔루션에
, 나는 내장 된 검색을 에뮬레이트하는 사용자 정의 검색 기능을 만들어야합니다 동시에 더 많은 코드).

<!DOCTYPE html> 
<html ng-app="m1"> 
    <head> 
    <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js'></script> 
    </head> 
    <body ng-controller="c1"> 
    <div> 
     Filter 
     <select ng-model="filterKey"> 
     <option value="bookId">By Id</option> 
     <option value="bookTitle">By Title</option> 
     <option value="author">By Author</option> 
     <option value="cost">By Cost</option> 
     </select> 
     <input type="text" ng-model="filterValue"> 
    </div> 
    <table> 
     <tr> 
     <th>SI. No.</th> 
     <th>Details</th> 
     </tr> 
     <tr custom-tr ng-repeat="book in books | filter: {filterKey: filterValue}"> 
     <td>{{ $index + 1 }}</td> 
     <td> 
      <table> 
      <tr> 
       <td>Book ID:</td> 
       <td>{{book.bookId}}</td> 
      </tr> 
      <tr> 
       <td>Book Title:</td> 
       <td>{{book.bookTitle}}</td> 
      </tr> 
      <tr> 
       <td>Book Author:</td> 
       <td>{{book.author}}</td> 
      </tr> 
      <tr> 
       <td>Book Cost:</td> 
       <td>{{book.cost}}</td> 
      </tr> 
      </table> 
     </td> 
     </tr> 
    </table> 
    </body> 
    <script type="text/javascript"> 
    var m1 = angular.module("m1", []); 

    m1.controller('c1',function($scope) 
    { 
     $scope.books = [ 
     { 
      "bookId": 101, 
      "bookTitle": "Angular JS", 
      "author": "Green", 
      "cost":375, 
     }, 
     { 
      "bookId": 102, 
      "bookTitle": "Instant AngularJS Starter", 
      "author": "Dan Menard", 
      "cost":150, 
     }, 
     { 
      "bookId": 103, 
      "bookTitle": "Ng-Book: The Complete Book on AngularJS", 
      "author": "Ari Lerner", 
      "cost":4657, 
     }]; 
    }); 
    </script> 
</html>

그러나 filterKey이 라인 <tr custom-tr ng-repeat="book in books | filter: {filterKey: filterValue}">에서 제대로 읽을되지 않기 때문에이 어쩌면, 작동하지 않는 : 그 일에서

나의 현재 시도는 이것이다.

<tr custom-tr ng-repeat="book in books | filter: {'author': filterValue}">

하지만, 내가 (우리가 무엇을 할 것이라고 개체의 모든 키 현재의 필터 식을 작성해야 이런 식으로 : 내가 수동으로 키를 작성하는 경우, 그것은 작동하기 때문에

나는 이렇게 생각한다 20 개의 키가 있다면? !!). 검색 알고리즘 나 자신을 모방하려고하지 않고

:

그래서, 내 질문은 검색 기능을 구현하는 방법이다. 모든 키의 필터 식을 작성할 필요없이
개별적으로

편집 :

<tr custom-tr ng-repeat="book in books | filter: {'author': filterValue} | filter: {'cost': filterValue}">

와 전혀 작동하지 않습니다 :
난 그냥 여러 필드를 시도했다.
어쨌든 올바른 방법은 무엇입니까?

출처

2016-08-19 Anmol Singh Jaggi

이 같은 것을 찾고 계십니까?

$scope.getFilteredBooks = function() { 
    var filter = {}; 
    filter[$scope.filterKey] = $scope.filterValue; 
    return filterFilter($scope.books, filter); 
    };

Plunker

출처

2016-08-19 22:07:54

이것은 훌륭한 솔루션입니다 큰 노력하고 있습니다!하지만 그것은 바로, 필터 아니다? 왜 내 첫 시도가 효과가 없었는지 설명해 주시겠습니까? 필터를 통해 처리 할 수 있습니까? –

이것은 잘못된 anser입니다, 나는 코멘트를 삭제했습니다. –

ES2015의 일부이며 최신의 여러 브라우저에서 지원되지 않는 계산 된 속성 이름을 사용할 수 있습니다. [브라우저 호환성] (https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#Browser_compatibility)을 볼 수 있습니다. 이 책의 구문은 다음과 같습니다 :''filter : {[filterKey] : filterValue}'. –

공통 필터가있는 여러 필드에서 검색 필터가 작동하지 않습니다.

답변

관련 문제