Angular.js中的搜索过滤器， [英] Search-by filter in Angular.js,
问题描述
我是这个框架的新手，因此练习Angularjs并遵循网站上提供的教程。
I am new to this framework, hence practicing Angularjs and following the tutorials available on the website.
有一个例子我们可以搜索表中的数据，
示例如下，
there is an example were we can search the data present in table, the example is as follows,
<!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>
在上面的代码中，我可以使用两种不同的输入搜索手机，即按型号搜索姓名并按公司名称搜索，
以上代码运行正常，
Here in the above code i am able to search the phone using two different inputs i.e. search by model Name and search by company Name , the above code runs fine,
但如果我需要使用选择选项中存在的搜索类型进行搜索，
But what if i need to search by using the type of search present in the select options,
代码如下
<!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>
从上面的代码中你可以看到我试图通过选择框中出现的姓名，公司或指定搜索员工，
From the above code you can see that i am trying to achieve is search employee by "Name", "Company" or "Designation" present in the selection box,
但我在这里出错，
ng-model查询没有选择正确的映射，
或者我可能是以错误的方式做，
the ng-model query doesn't picks up the right mapping, or may be i am doing in a wrong way,
你能告诉我我将如何实现这一目标，
can you please tell me how will i achieve this,
我应该改变哪部分代码
推荐答案
我创建了一个plunkr。您可以在搜索查询上定义要过滤的属性。
在选择中，您选择要过滤的属性并将其分配给搜索查询。
I've created a plunkr. You can define properties on the search query to filter by. In the select you choose the property you want to filter by and assign it to the search query.
http://plnkr.co/edit/XklvXtc1AZpndjLvXrh8?p=preview
这篇关于Angular.js中的搜索过滤器，的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
