Question

我有一个ng-repeat显示一个使用标签（最喜欢的项目）通过布尔值过滤的集合，当我更新集合时，过滤器不会重新应用。我有：

所有项目|收藏夹

第1项
第2项
第3项

当它首次从服务器加载（使用json）集合时，选项卡可以正常工作并过滤集合。当您单击某个项目时，我会更新该项目的收藏夹属性，但过滤器不会更新，如果您单击选项卡，则表明数据似乎未更新。

代码：

HTML：

<button class="btn" ng-model="section" value="all-items" ng-click="filterCriteria={};   activate('all-items')" ng-class="{disabled: products.length == 0, active: section == 'all-items'}">All items ({{products.length}})</button>

<button class="btn" ng-model="section" value="favourites" ng-click="activate('favourites'); filterCriteria.Favourite = true;" ng-class="{disabled: (products | filter: {Favourite:true}).length < 0, active: section == 'favourites'}">Favourites</button>

<!-- List of products -->
<ul>
    <li ng-repeat="product in products | filter: filterCriteria">
        <button class="btn" type="button" ng-click="favouriteClick(product)">Favourite</button>
        <p>{{product.description}}</p>
    </li>
</ul>

控制器

app.controller('ProductListCtrl', ['$scope', '$http', function ($scope, $http, $filter)     {

    $http.get('/Products').success(function (data) {
        $scope.products = data;
    });

    $scope.filterCriteria = {};
    $scope.section = "all-items";

    $scope.activate = function (option) {
        $scope.section = option;
    };

    $scope.favouriteClick = function (product) {

        product.favourite = !product.favourite;

        // Sync with back-end
        $http({
            method: 'POST',
            url: '/SetFavourite',
            data: 'name=' + product.Sku + '&value=' + product.favourite,
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
        });
    };
} ]);

任何反馈都非常感谢。感谢

修改

我用解决方案http://jsfiddle.net/njrHm/

创造了一个小提琴

Answer 1

这是一个套管问题。你有：

ng-click="activate('favourites'); filterCriteria.Favourite = true;"

......然后你就得到了：

product.favourite = !product.favourite;

我知道您想要将ngClick更改为使用小写favourite。

使用选项卡通过布尔值过滤ng-repeat绑定集合，当我更新集合时，过滤器不会重新应用

1 个答案: