Recherche par filtre dans Angular.js,

Je suis nouvelle dans ce cadre, d'où pratiquer Angularjs et en suivant les tutoriels disponibles sur le site web.

il est un exemple nous pouvons rechercher les données présentes dans le tableau,
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 à l'aide de deux entrées différentes-recherche par Nom de modèle et de recherche par Nom de société ,
le code ci-dessus fonctionne très bien,

Mais que faire si j'ai besoin de rechercher en utilisant le type de recherche présents dans l'sélectionnez options,

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>

Du code ci-dessus vous pouvez voir que je suis en train de réaliser est à la recherche d'un employé, par "Nom", "Société" ou "Désignation" présent dans la boîte de sélection,

mais je vais mal ici,

la ng-modèle de requête ne ramasse le droit de la cartographie,
ou peut-être que je fais une mauvaise manière,

pouvez-vous s'il vous plaît dites-moi comment vais-je y parvenir,

la partie du code dois-je changer

source d'informationauteur Rahul Shivsharan

27

J'ai créé un plunkr. Vous pouvez définir des propriétés sur la requête de recherche pour filtrer la liste.
Dans le sélectionnez vous choisissez la propriété que vous souhaitez utiliser pour le filtrage et l'affecter à la requête de la recherche.

http://plnkr.co/edit/XklvXtc1AZpndjLvXrh8?p=preview
4

Un exemple, vous vous référez à des usages objet de préciser les touches filtres, alors que votre code envoie toujours une chaîne de caractères, et c'est la question principale cause.

Supposons que j'ai tapé "e" dans le champ de recherche. Sans la fonction "Rechercher par" est sélectionné, le filtre de recherche pour "e" à chaque valeur de clé. Lorsque l'on sélectionne la valeur de la fonction "Rechercher par", de chaîne de requête devient l'option actuelle de la valeur ("nom", "société" ou "désignation"), et procéder de la même scenatio "e", à l'exception sans aucun résultat, car il n'y a pas de matches dans les données de test.

La bonne façon de choisir "rechercher par" serait contructing un objet avec une seule clé nommée comme option choisie, égale à la requête de recherche. Donc, si l'utilisateur recherche avec le nom "sh", ce sera:
```
{
name: "sh"
}
```
Dans le cas où aucune option choisie pourtant, le bien doit être nommé "$", de cette façon, le filtre de recherche parmi toutes les propriétés.

J'ai corrigé le code fonctionne comme prévu (lien). Comment la mettre en œuvre c'est une autre question, mais je suis allé en définissant queryFilter objet $scope, avec getter qui renvoie l'objet de 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>
```
1

Simple et flexible jsfiddle.

Peut citer les champs de filtre également
```
filterFields: [
"name",
"company"
]
```

Vous devez vous connecter pour publier un commentaire.