Фильтр поиска в Angular.js,
Я новичок в этой среде, поэтому практикую Angularjs и следую инструкциям, доступным на сайте.
есть пример, где мы можем искать данные, представленные в таблице, пример следующий,
<!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>
Здесь, в приведенном выше коде, я могу искать телефон с помощью двух разных входов, то есть поиск по названию модели и поиск по названию компании, приведенный выше код работает нормально,
Но что, если мне нужно искать, используя тип поиска, присутствующий в опциях выбора,
код выглядит следующим образом
<!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-модели не подбирает правильное отображение, или, может быть, я делаю неправильно,
не могли бы вы сказать мне, как я достигну этого,
какую часть кода я должен изменить