wake-up-neo.net

Suchfilter nach Angular.js,

Ich bin neu in diesem Rahmen und übe daher Angularjs und folge den Tutorials, die auf der Website verfügbar sind.

es gibt ein Beispiel, in dem wir die in der Tabelle vorhandenen Daten suchen können... Das Beispiel lautet wie folgt:

<!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>

Hier im obigen Code kann ich das Telefon mit zwei verschiedenen Eingaben durchsuchen, d. H. Suche nach Modellname und Suche nach Firmenname, Der obige Code läuft einwandfrei.

Aber was ist, wenn ich suchen muss, indem Sie die Art der Suche in den Auswahloptionen verwenden,

der Code lautet wie folgt

<!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>

Aus dem obigen Code können Sie sehen, dass ich versuche, Mitarbeiter nach "Name", "Firma" oder "Bezeichnung" in der Auswahlbox zu suchen.

aber ich gehe hier falsch

die ng-model-Abfrage nimmt nicht die richtige Zuordnung auf, oder ich mache es falsch,

können Sie mir bitte sagen, wie ich das erreichen kann,

welchen Teil des Codes sollte ich ändern?

10

Ich habe ein Plunkr erstellt. Sie können Eigenschaften für die Suchabfrage definieren, um nach ... zu filtern. Wählen Sie im Auswahlfeld die Eigenschaft aus, nach der Sie filtern möchten, und ordnen Sie sie der Suchabfrage zu.

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

28
bekite

Ein Beispiel, auf das Sie sich beziehen, verwendet object, um Filterschlüssel anzugeben, während Ihr Code immer eine Zeichenfolge sendet. Dies ist die Hauptursache für das Problem.

Nehmen wir an, ich habe "e" in das Suchfeld eingegeben. Wenn "Suche nach" nicht ausgewählt ist, sucht der Filter in jedem Schlüsselwert nach "e". Wenn wir einen Wert aus "Suchen nach" auswählen, wird die Abfragezeichenfolge zum aktuellen Wert der Option ("Name", "Firma" oder "Bezeichnung") und wird in derselben Situation wie "e" fortgesetzt, es sei denn, es ist kein Ergebnis vorhanden keine Übereinstimmung in den Testdaten.

Der richtige Weg, um "Suchen nach" zu wählen, besteht darin, ein Objekt mit einem einzelnen Schlüssel zu konstruieren, der als gewählte Option bezeichnet wird, gleich der Suchabfrage. Wenn der Benutzer mit "sh" nach Namen sucht, wird Folgendes angezeigt:

{
    name: "sh"
}

Falls noch keine Option ausgewählt wurde, sollte die Eigenschaft "$" heißen. Auf diese Weise wird der Filter zwischen allen Eigenschaften durchsucht.

Ich habe den Code so eingestellt, dass er wie vorgesehen funktioniert ( link ). Wie Sie dies implementieren, ist eine andere Frage, aber ich definierte das queryFilter-Objekt in $ scope mit getter, das ein Objekt des gewünschten Formats zurückgibt.

.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>
4
Klaster_1

Einfach und flexibel jsfiddle

Kann die Filterfelder auch erwähnen 

filterFields: [
  "name",
  "company"
]