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

ng-repeat bind collection filtered by a boolean using tabs, when I update the collection the filter doesn't re-apply

本文关键字：集合 新应用 过滤器 应用 选项 绑定 过滤 ng-repeat 布尔值 更新      更新时间：2023-09-26

我有一个ng-repeat，它显示一个使用选项卡(最喜欢的项目)的布尔过滤的集合，当我更新集合时，过滤器不会重新应用。我:

所有项目|收藏

  • 第1项
  • 项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/

这是大小写问题。你有:

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

…然后是:

product.favourite = !product.favourite;

我知道你想把你的ngClick改成小写的favourite。

相关文章：