0
オブジェクトのさまざまなプロパティを個別に検索するフィルタリングボックスを作成しようとしています。共通のモデルを持つ複数のフィールドで検索フィルタが機能しない
<!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のキーがあったら？!!）。検索アルゴリズムを自分自身をエミュレートしようとしなければ
- ：
だから、私の質問は、検索機能を実装する方法です。
- EDIT
個別にすべてのキーのためのフィルタ式を記述することなく、：私はちょうど複数のフィールドでそれを試してみました
：
<tr custom-tr ng-repeat="book in books | filter: {'author': filterValue} | filter: {'cost': filterValue}">
、それがまったく機能していません。
とにかく、正しい方法は何ですか？
これは素晴らしいソリューションであり、偉大な働いている！それは右、フィルタではありませんか？私の最初の試みがうまくいかなかった理由を説明できますか？そしてそれはフィルターを通して行うことができますか？ –
これは間違ったanserだった、私はコメントを削除しました。 –
ES2015の一部であり、最新のいくつかのブラウザーではサポートされていない計算プロパティー名を使用できます。 [ブラウザの互換性]（https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer#Browser_compatibility）が表示されます。これは構文にあります：本の中の本| filter：{[filterKey]：filterValue} '。 –