Recherche par filtre dans Angular.js,
Je suis nouveau dans ce cadre, pratiquant donc Angularjs et suivant les tutoriels disponibles sur le site.
il y a un exemple où nous pouvons rechercher les données présentes dans la table, l'exemple est comme suit,
<!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>
Ici, dans le code ci-dessus, je suis en mesure de rechercher le téléphone en utilisant deux entrées différentes, à savoir la recherche par nom de modèle et la recherche par nom de société, Le code ci-dessus fonctionne correctement,
Mais si je dois rechercher en utilisant le type de recherche présent dans les options de sélection,
le code est comme suit
<!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>
À partir du code ci-dessus, vous pouvez voir que je cherche à obtenir un employé de recherche par "nom", "entreprise" ou "désignation" présent dans la zone de sélection,
mais je me trompe ici,
la requête ng-model ne prend pas le bon mappage, .__ ou peut-être que je me trompe,
pouvez-vous s'il vous plaît me dire comment vais-je atteindre cet objectif,
quelle partie du code dois-je changer
J'ai créé un plunkr. Vous pouvez définir des propriétés sur la requête de recherche à filtrer par . Dans la sélection, choisissez la propriété que vous souhaitez filtrer et affectez-la à la requête de recherche.
Un exemple auquel vous faites référence utilise object pour spécifier des clés de filtre, alors que votre code envoie toujours une chaîne, ce qui est la cause principale du problème.
Supposons que j'ai tapé "e" dans le champ de recherche. Si l'option "Rechercher par" n'est pas sélectionnée, le filtre recherche "e" dans chaque valeur de clé. Lorsque nous sélectionnons une valeur dans "Rechercher par", la chaîne de requête devient la valeur de l'option en cours ("nom", "société" ou "désignation") et se poursuit dans le même scénario que "e", sauf qu'aucun résultat ne se produit car il n'y a pas de correspondance dans les données de test.
La bonne façon de choisir "rechercher par" serait de construire un objet avec une clé unique nommée comme option choisie, égale à la requête de recherche. Donc, si l’utilisateur recherche le nom avec "sh", ce sera:
{
name: "sh"
}
Au cas où aucune option ne serait encore choisie, la propriété devrait être nommée "$", de cette façon le filtre cherchera parmi toutes les propriétés.
J'ai corrigé le code pour qu'il fonctionne comme prévu ( link ). La façon dont vous implémentez ceci est une autre question, mais je suis allé en définissant l'objet queryFilter sur $ scope, avec getter qui renvoie l'objet du format souhaité.
.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>
Simple et flexible jsfiddle .
Peut aussi mentionner les champs de filtrage
filterFields: [
"name",
"company"
]