Angular.jsの検索フィルター、
私はこのフレームワークが初めてなので、Angularjsを練習し、Webサイトで入手可能なチュートリアルに従います。
表にあるデータを検索できる例があります。例は次のとおりです。
<!DOCTYPE html>
<html ng-app="SmartPhoneApp">
<head>
<title>Smart phone Angular</title>
<script type="text/javascript" src="D:/Rahul Shivsharan/Installers/AngularJS/angular.js"></script>
<script type="text/javascript">
var smartPhoneApp = angular.module("SmartPhoneApp",[]);
smartPhoneApp.controller("phoneCtrl",function($scope){
$scope.phones = [
{
"modelName" : "LUMIA 520",
"companyName" : "NOKIA"
},
{
"modelName" : "GALAXY S Series",
"companyName" : "SAMSUNG"
},
{
"modelName" : "CANVAS",
"companyName" : "MICROMAX"
},
{
"modelName" : "OPTIMUS",
"companyName" : "LG"
}
];
});
</script>
</head>
<body>
Search by Model Name : <input ng-model="comp.modelName" />
Search by Company : <input ng-model="comp.companyName" />
<div ng-controller="phoneCtrl">
<table ng-repeat="phone in phones | filter: comp">
<tr>
<td>{{phone.modelName}}</td>
<td>{{phone.companyName}}</td>
</tr>
</table>
</div>
</body>
</html>
ここで上記のコードでは、2つの異なる入力を使用して電話を検索できます。つまり、モデル名で検索し、会社名で検索します。上記のコードは正常に実行されますが、
しかし、選択オプションにある検索タイプを使用して検索する必要がある場合はどうなりますか？
コードは次のとおりです
<!DOCTYPE html>
<html ng-app="EmployeeApp">
<head>
<title>Orderring People</title>
<script type="text/javascript" src="D:/Rahul Shivsharan/Installers/AngularJS/angular.js"></script>
<script type="text/javascript">
var employeeApp = angular.module("EmployeeApp",[]);
employeeApp.controller("empCtrl",function($scope){
$scope.employees = [
{
"name" : "Mahesh Pachangane",
"company" : "Syntel India Pvt. Ltd",
"designation" : "Associate"
},
{
"name" : "Brijesh Shah",
"company" : "Britanica Software Ltd.",
"designation" : "Software Engineer"
},
{
"name" : "Amit Mayekar",
"company" : "Apex Solutions",
"designation" : "Human Resource"
},
{
"name" : "Ninad Parte",
"company" : "Man-made Solutions",
"designation" : "Senior Architect"
},
{
"name" : "Sunil Shrivastava",
"company" : "IBM",
"designation" : "Project Lead"
},
{
"name" : "Pranav Shastri",
"company" : "TCS",
"designation" : "Senior Software Engineer"
},
{
"name" : "Madan Naidu",
"company" : "KPMG",
"designation" : "Senior Associate"
},
{
"name" : "Amit Gangurde",
"company" : "Amazon",
"designation" : "Programe Manager"
}
];
$scope.orderProp="name";
});
</script>
</head>
<body ng-controller="empCtrl">
<table>
<tr>
<td align="right">Search :</td>
<td><input ng-model="query" /></td>
</tr>
<tr>
<td align="right">Search By :</td>
<td>
<select ng-model="query">
<option value="name">NAME</option>
<option value="company">COMPANY</option>
<option value="designation">DESIGNATION</option>
</select>
</td>
</tr>
</table>
<hr>
<div>
<table>
<tr>
<th>Employee Name</th>
<th>Company Name</th>
<th>Designation</th>
</tr>
<tr ng-repeat="emp in employees | filter:query">
<td>{{emp.name}}</td>
<td>{{emp.company}}</td>
<td>{{emp.designation}}</td>
</tr>
</table>
</div>
</body>
上記のコードから、達成しようとしているのは、選択ボックスにある「名前」、「会社」、または「指定」で従業員を検索することです。
しかし、私はここで間違っています、
ng-model queryは正しいマッピングを選択しないか、間違った方法で実行している可能性があります。
どうやってこれを達成するのか教えてください。
コードのどの部分を変更する必要があります
Plunkrを作成しました。検索クエリのプロパティを定義して、フィルタリングすることができます。選択では、フィルタリングするプロパティを選択し、検索クエリに割り当てます。
参照する例では、オブジェクトを使用してフィルターキーを指定しますが、コードは常に文字列を送信しますが、これが主な問題の原因です。
検索フィールドに「e」と入力したと仮定します。 「検索方法」を選択しないと、フィルターはすべてのキー値で「e」を検索します。 「Search by」から値を選択すると、クエリ文字列は現在のオプションの値（「name」、「company」、または「designation」）になり、「e」と同じシナリオで進行します。テストデータに一致するものはありません。
「by by」を選択する適切な方法は、選択されたオプションとして指定された単一のキーを持つオブジェクトを構築することです。これは、検索クエリと同等です。したがって、ユーザーが「sh」で名前を検索すると、次のようになります。
{
name: "sh"
}
オプションがまだ選択されていない場合、プロパティに「$」という名前を付ける必要があります。これにより、フィルタはすべてのプロパティを検索します。
意図したとおりに動作するようにコードを修正しました（ link ）。これを実装する方法は別の質問ですが、目的の形式のオブジェクトを返すゲッターを使用して、$ scopeでqueryFilterオブジェクトを定義しました。
.controller("empCtrl", function($scope) {
Object.defineProperty($scope, "queryFilter", {
get: function() {
var out = {};
out[$scope.queryBy || "$"] = $scope.query;
return out;
}
})
...
<body ng-controller="empCtrl">
<table>
<tr>
<td align="right">Search :</td>
<td><input ng-model="query" /></td>
</tr>
<tr>
<td align="right">Search By :</td>
<td>
<select ng-model="queryBy">
<option value="name">NAME</option>
<option value="company">COMPANY</option>
<option value="designation">DESIGNATION</option>
</select>
</td>
</tr>
</table>
<hr>
<div>
<table>
<tr>
<th>Employee Name</th>
<th>Company Name</th>
<th>Designation</th>
</tr>
<tr ng-repeat="emp in employees | filter:queryFilter">
<td>{{emp.name}}</td>
<td>{{emp.company}}</td>
<td>{{emp.designation}}</td>
</tr>
</table>
</div>
</body>