AngularJS智能表奇怪的行爲與嵌套的對象和ST搜索

Question

我想在我的AngularJS應用程序中實現智能表模塊。我比其他人更喜歡這一點，主要是因爲其他人似乎需要我的控制器中的許多樣板代碼，並且我希望儘可能使我的控制器儘可能乾燥。但我願意接受其他模塊，可以在沒有樣板的情況下完成同樣的任務。

它在處理直線對象數組時很有效，但如果其中一些對象具有嵌套對象，則過濾和排序會有奇怪的行爲。

這需要一些解釋讓我忍受。

首先，這裏是我的嵌套對象的數組（縮短可讀性這裏）：

$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; 

這裏是我的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> 

所以這一切工作正常，如果我的數組沒有按沒有嵌套對象。但與嵌套的對象（例如st-search="new.price"我碰到下面的問題（見截圖）：

1. 有時，當我進入一個「嵌套的對象」搜索欄中輸入文字，所有其他領域也有嵌套對象繼承相同的值（但過濾仍然正常）。這並不總是這樣做，只是有時...
2. 嵌套對象上的布爾值不能正確計算True將顯示所有記錄，但False將只顯示記錄的值爲False。

其他人想出瞭如何處理嵌套對象和智能表模塊？

Answer 1

您需要使用您的收藏的副本，所以不是做直接分配$scope.displayedProducts = $scope.products;你應該做的$scope.displayedProducts= $scope.displayedProducts.concat($scope.products);

Answer 2

正如勞倫特說，你需要使用自定義過濾器

使用ST集-filter來設置過濾器

在你的模塊，定義自定義過濾器

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; 
    }; 
}])