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