AngularJS Dynamische Filter basierend auf ausgewählten Spalte

Question

Ich bin ein AngularJS Anfänger, habe ich eine JSON-Objekt

[ 
    { 
    "id": 1, 
    "name": "ASP.net", 
    "description": "ASP.net Course", 
    "cost": 3000, 
    "areaId": 1, 
    "addedDate": "2017-11-29T16:58:57.0751079", 
    "deleted": false, 
    "modifiedDate": "2017-12-11T15:36:32.0780015", 
    "area": { 
     "id": 1, 
     "areaName": "Programming", 
     "areaDescription": "Software Development Courses", 
     "addedDate": "2017-11-29T16:58:57.0744734", 
     "deleted": false, 
     "modifiedDate": "2017-11-29T16:58:57.0746376" 
    } 
    }, 
    { 
    "id": 2, 
    "name": "PHP", 
    "description": "PHP Tutorial", 
    "cost": 3000, 
    "areaId": 1, 
    "addedDate": "2017-11-29T16:58:57.0751088", 
    "deleted": false, 
    "modifiedDate": "2017-12-14T12:41:06.8059371", 
    "area": { 
     "id": 1, 
     "areaName": "Programming", 
     "areaDescription": "Software Development Courses", 
     "addedDate": "2017-11-29T16:58:57.0744734", 
     "deleted": false, 
     "modifiedDate": "2017-11-29T16:58:57.0746376" 
    } 
    }, 
    { 
    "id": 15, 
    "name": "JAVA", 
    "description": "JAVA Tutorial", 
    "cost": 3000, 
    "areaId": 1, 
    "addedDate": "2017-12-05T10:28:59.5280719", 
    "deleted": false, 
    "modifiedDate": "2017-12-05T10:28:59.5280713", 
    "area": { 
     "id": 1, 
     "areaName": "Programming", 
     "areaDescription": "Software Development Courses", 
     "addedDate": "2017-11-29T16:58:57.0744734", 
     "deleted": false, 
     "modifiedDate": "2017-11-29T16:58:57.0746376" 
    } 
    }] 

und einfache HTML-Tabelle mit Filtereingang

<table> 
       <tr> 
        <td> 
         <span class="label label-primary" style="font-size:large"> Search By :</span> 
        </td> 
        <td> 
         <select ng-model="app.queryByValue" class="dropdown form-control input-sm" id="ddlseach"> 
          <option ng-repeat="x in app.queryByDll" ng-value="x.id">{{x.name}}</option> 
         </select> 
        </td> 
       </tr> 
      </table> 
      <table> 
       <tr> 
        <td> 
         <div class='wrapper'> 
          <input ng-model="app.query[app.queryByValue]" class="input-sm form-control" id="txtsrch1" placeholder=" -- Search --" /> 
          <!--<input ng-model="app.query.area.areaName" class="input-sm form-control" id="txtsrch2" placeholder=" -- Search --" style="visibility:hidden" />--> 
         </div> 
        </td> 
       </tr> 
      </table> 

    <table class="table table-condensed"> 
        <tr style="cursor:pointer"> 
         <th ng-click="predicate = 'id'; reverse=!reverse"> 
          Id 
          <i ng-class="{'fa fa-arrow-down' : reverse && predicate==='id', 
             'fa fa-arrow-up' : !reverse && predicate==='id', 
             'arrow-not-sorted': predicate!=='id'}"></i> 
         </th> 

         <th ng-click="predicate = 'area.areaName'; reverse=!reverse"> 
          Area 
          <i ng-class="{'fa fa-arrow-down' : reverse && predicate==='area.areaName', 
             'fa fa-arrow-up' : !reverse && predicate==='area.areaName', 
             'arrow-not-sorted': predicate!=='area.areaName'}"></i> 
         </th> 
         <th ng-click="predicate = 'name'; reverse=!reverse"> 
          Name 

          <i ng-class="{'fa fa-arrow-down' : reverse && predicate==='name', 
             'fa fa-arrow-up' : !reverse && predicate==='name', 
             'arrow-not-sorted': predicate!=='name'}"></i> 

         </th> 
         <th ng-click="predicate = 'description'; reverse=!reverse"> 
          Description 

          <i ng-class="{'fa fa-arrow-down' : reverse && predicate==='description', 
             'fa fa-arrow-up' : !reverse && predicate==='description', 
             'arrow-not-sorted': predicate!=='description'}"></i> 

         </th> 
         <th ng-click="predicate = 'cost'; reverse=!reverse"> 
          Cost 
          <i ng-class="{'fa fa-arrow-down' : reverse && predicate==='cost', 
             'fa fa-arrow-up' : !reverse && predicate==='cost', 
             'arrow-not-sorted': predicate!=='cost'}"></i> 
         </th> 
         <th ng-click="predicate = 'modifiedDate'; reverse=!reverse"> 
          Last Modified Date 

          <i ng-class="{'fa fa-arrow-down' : reverse && predicate==='modifiedDate', 
             'fa fa-arrow-up' : !reverse && predicate==='modifiedDate', 
             'arrow-not-sorted': predicate!=='modifiedDate'}"></i> 
         </th> 
         <th ng-click="predicate = 'deleted'; reverse=!reverse"> 
          Deleted ? 

          <i ng-class="{'fa fa-arrow-down' : reverse && predicate==='deleted', 
             'fa fa-arrow-up' : !reverse && predicate==='deleted', 
             'arrow-not-sorted': predicate!=='deleted'}"></i> 
         </th> 
         <th colspan="3"><center>Action</center></th> 

        </tr> 
        <tr dir-paginate="c in app.courses | orderBy:predicate:reverse | filter:app.query | itemsPerPage:app.pageRecords"> 
         <td>{{ c.id }}</td> 
         <td>{{ c.area.areaName }}</td> 
         <td>{{ c.name }}</td> 
         <td>{{ c.description }}</td> 
         <td>{{ c.cost }}</td> 
         <td><span ng-bind="c.modifiedDate | date:'MM/dd/yyyy HH:mm:ss'"></span> </td> 
         <td><span ng-bind="c.deleted"></span> </td> 
         <td class="center"> 
          <input type="button" class="btn btn-success btn-sm " value="Update" ng-click="app.UpdateCourse(c)" /> 
         </td> 
         <td class="center"> 
          <input type="button" class="btn btn-info btn-sm" value="Soft Delete" ng-click="app.DeleteCourse(c,'soft')" /> 
         </td> 
         <td class="center"> 
          <input type="button" class="btn btn-danger btn-sm" value="Hard Delete" ng-click="app.DeleteCourse(c,'hard')" /> 
         </td> 
        </tr> 
       </table> 

Und schließlich JS Code

$http.get(WepAPI_URL).then(function (response) { 
      vm.courses = response.data; 
      vm.queryByDll = 
       [ 
        { 
         'id': '$', 'name': 'All' 
        }, 
        { 
         'id': 'id', 'name': 'ID' 
        }, 
        { 
         'id':'area.areaName', 'name': 'Area' 
        }, 
        { 
         'id': 'name', 'name': 'Name' 
        }, { 
         'id': 'description', 'name': 'Description' 
        } 
        , { 
         'id': 'cost', 'name': 'Cost' 
        }]; 
      vm.queryByValue = vm.queryByDll[0].id; 

      vm.pageRecords = 5; 
     }); 

Daten wurden erfolgreich in der Tabelle angezeigt und ich bin in der Lage, das Objekt mit allen Feldern außer "area.areaN" zu filtern ame "

so die folgende Zeile für alle Bereiche außer dem Kind Objekt gearbeitet [AREA]

<input ng-model="app.query[app.queryByValue]" class="input-sm form-control" id="txtsrch1" placeholder=" -- Search --" /> 

Allerdings, wenn ich diese Zeile verwenden

<input ng-model="app.query.area.areaName" class="input-sm form-control" id="txtsrch2" placeholder=" -- Search --" /> 

Filterung mit Bereich funktioniert

Ich habe eine Problemumgehung durch die Verwendung der 2 Textfelder gemacht und wenn Benutzer Bereich auswählen, zeige ich txtsrch2 und ausblenden txtsrch1

, aber ich bin sicher, dass es eine bessere Lösung des mich mit allen Feldern einschließlich dem Kind-Objekt mit einem Textfeld filtern lassen

Answer 1

Es sieht für mich wie das Problem ist, dass das area.areaName Element ist die einzigen Filterkriterien aufgelistet zwei Ebene tief. Also in Ihrem ersten Filterversuch mit app.query[app.queryByValue] Sie tatsächlich am Ende versuchen, auf app.query["area.areaName"] zu filtern, die den Wert nicht interpretieren Sie wünschen.

Basierend auf Ihrem Tabellen-Rendering gehe ich davon aus, dass jedes Objekt in Ihrer Antwort nur ein area Objekt darin verschachtelt hat (zB zeigt Ihr JSON Bereich als Array innerhalb jedes Antwortobjekts, aber Ihr Tabellen-Rendering nimmt an, dass es nur ein solches Flächenobjekt gibt). Wenn diese Annahme richtig ist, dann gibt es zwei Möglichkeiten, wie Sie Ihr Problem beheben können:

1. ändern Sie bitte Ihre JSON-Antwort areaName als Top-Level-Eigenschaft in jedem Antwortobjekt zu setzen, wenn vom Server zurückgegeben und dann benutzen Sie einfach areaName in die Filterbedingung

OR

2. nachbearbeiten die JSON Antwort, wenn areaName aus dem Innern des area Array zurück zu einer Top-Level-Eigenschaft in dem Antwortobjekt kopieren empfangenen und dann einfach areaName im Filterzustand

Ich hoffe, dass eine dieser Lösungen für Sie realisierbar ist.