我有一个 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' }
});
};
} ]);
非常感谢任何反馈。谢谢
编辑