0

我有一个 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/创建了一个小提琴

4

1 回答 1

0

是外壳问题。你有：

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

...然后你有：

product.favourite = !product.favourite;

我收集你想改变你ngClick使用小写favourite。

于 2013-05-09T19:02:16.710 回答