AngularJS Smart-Tabelle seltsames Verhalten mit verschachtelten Objekten und st-Suche

Question

Ich versuche, das Smart Table-Modul in meiner AngularJS-App zu implementieren. Ich würde dies gegenüber einigen anderen vorziehen, hauptsächlich weil die anderen in meinem Controller eine Menge Vortex-Code zu benötigen scheinen und ich möchte meine Controller so trocken wie möglich halten. Aber ich bin offen für andere Module, die das Gleiche ohne den Standard erreichen können.

Es funktioniert hervorragend im Umgang mit einem geraden Array von Objekten, aber wenn einige dieser Objekte verschachtelte Objekte haben, hat das Filtern und Sortieren seltsames Verhalten.

Dies wird einige Erläuterungen erfordern, also ertragen Sie mit mir.

Vor allem hier ist meine Reihe von verschachtelten Objekten (zur besseren Lesbarkeit verkürzt hier):

$scope.products = [ 
    { 
     'display': 'Live', 
     'name': 'LC1D09', 
     'category': 'Motor Control', 
     'subcategory': 'Contactor', 
     'manufacturer': 'Telemecanique', 
     'specs': { 
      'phase': 3, 
      'poles': 3 
     }, 
     'new': { 
      'price': 158.95 
     }, 
     'refurbished': { 
      'price': 145 
     }, 
     'onlineStores': { 
      'amazon': true, 
      'ebay': false 
     }, 
     'isCool': true 
    }, 
    { 
     'display': 'Pending', 
     'name': 'FA32020', 
     'category': 'Circuit Breaker', 
     'subcategory': 'Molded Case', 
     'manufacturer': 'Square D', 
     'specs': { 
      'phase': 1, 
      'poles': 2 
     }, 
     'new': { 
      'price': 217.79 
     }, 
     'refurbished': { 
      'price': 192.82 
     }, 
     'onlineStores': { 
      'amazon': true, 
      'ebay': true 
     }, 
     'isCool': false 
    } 
]; 
$scope.displayedProducts = $scope.products; 

Hier ist mein HTML:

<table st-table="displayedProducts" st-safe-src="products" class="table table-striped table-bordered table-hover"> 
    <thead> 
     <tr> 
      <th st-sort="name">Name</th> 
      <th st-sort="category">Category</th> 
      <th>Subcategory</th> 
      <th>Manufacturer</th> 
      <th>New Price</th> 
      <th>Refurb. Price</th> 
      <th>Display</th> 
      <th>Specs</th> 
      <th>Cool</th> 
     </tr> 
     <tr> 
      <th><input st-search="'name'" placeholder="" class="input-sm form-control" type="search"/></th> 
      <th><input st-search="'category'" placeholder="" class="input-sm form-control" type="search"/></th> 
      <th><input st-search="'subcategory'" placeholder="" class="input-sm form-control" type="search"/></th> 
      <th><input st-search="'manufacturer'" placeholder="" class="input-sm form-control" type="search"/></th> 
      <th><input st-search="new.price" placeholder="" class="input-sm form-control" type="search"/></th> 
      <th><input st-search="refurbished.price" placeholder="" class="input-sm form-control" type="search"/></th> 
      <th><input st-search="'display'" placeholder="" class="input-sm form-control" type="search"/></th> 
      <th><input st-search="'specs'" placeholder="" class="input-sm form-control" type="search"/></th> 
      <th> 
       <select st-search="onlineStores.ebay" class="form-control"> 
        <option value=""></option> 
        <option value="true">Yes</option> 
        <option value="false">No</option> 
       </select> 
      </th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="product in displayedProducts"> 
      <td>{{product.name}}</td> 
      <td>{{product.category}}</td> 
      <td>{{product.subcategory}}</td> 
      <td>{{product.manufacturer}}</td> 
      <td>${{product.new.price | number : 0}}</td> 
      <td>${{product.refurbished.price | number : 0}}</td> 
      <td>{{product.display}}</td> 
      <td>{{product.specs}}</td> 
      <td>{{product.onlineStores.ebay}}</td> 
     </tr> 
    </tbody> 
</table> 

So das alles funktioniert gut, wenn mein Array doesn Habe keine verschachtelten Objekte. Aber mit den verschachtelten Objekten (zB st-search="new.price" ich die folgenden Probleme (siehe Screenshot erhalten):

1. Manchmal, wenn ich Text in einem „verschachtelte Objekt“ Suchfeld eingeben, werden alle anderen Felder, die auch verschachtelte Objekte haben erben die gleicher Wert (aber die Filterung funktioniert immer noch einwandfrei.) Dies geschieht nicht immer, nur manchmal ...
2. Boolesche Werte auf verschachtelten Objekten werden nicht korrekt berechnet True zeigt alle Datensätze, aber False zeigt nur die Datensatz, dessen Wert False ist

Hat jemand anders herausgefunden, wie man mit verschachtelten Objekten und dem Smart-Table-Modul umgeht?

Answer 1

Sie benötigen eine Kopie Ihrer Sammlung zu verwenden, so stattdessen die direkte Zuordnung zu tun $scope.displayedProducts = $scope.products; sollten Sie $scope.displayedProducts= $scope.displayedProducts.concat($scope.products);

Answer 2

tun wie Laurent sagte, benötigen Sie einen benutzerdefinierten Filter verwenden

Verwenden st-Set -filter Ihre Filter

In Ihrem Modul zu setzen, einen benutzerdefinierten Filter

definieren

angular.module('myModule').filter('customFilter', ['$parse', function($parse) { 
    return function(items, filters) { 
     var itemsLeft = items.slice(); 

     Object.keys(filters).forEach(function(model) { 
      var value = filters[model], 
       getter = $parse(model); 

      itemsLeft = itemsLeft.filter(function(item) { 
       return getter(item) === value; 
      }); 
     }); 

     return itemsLeft; 
    }; 
}])