嵌套对象和 st-search 的 AngularJS 智能表奇怪行为

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

正如 laurent 所说，您需要使用自定义过滤器

使用 st-set-filter 设置您的过滤器

<table st-table="displayedProducts" st-safe-src="products" st-set-filter="customFilter" class="table table-striped table-bordered table-hover">

在您的模块中，定义一个自定义过滤器

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