搜索筛选器不适用于多个领域与共同的模型

我想创建一个搜索框，它可以筛选对象的各种属性单独搜索。
在我目前的解决方案，我要创造出模拟的内置搜索自定义搜索功能：搜索筛选器不适用于多个领域与共同的模型

<!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）。下面是语法：''book in books | filter：{[filterKey]：filterValue}'。 –

搜索筛选器不适用于多个领域与共同的模型

回答

相关问题