Angular.js隐藏或删除一个项目，然后将其替换为列表中的下一个可用项目
[英]Angularjs hide or remove an item then replace it with the next available item on the list
问题描述
in Angularjs if I have a list of elements in it it has a array with an item called available using ng-if or ng-show I would like to show 3 elements at a time if one element have 0 items available then remove that one from the list and add the next, but I have an issue where the next element doesn't takes the place of the hidden or removed item unless I up the limitTo up to 4 any ideas? 
在Angularjs中，如果我有一个元素列表，则它具有一个数组，该数组具有使用ng-if或ng-show称为可用项的数组。如果一个元素有0个可用项，我想一次显示3个元素，然后从列表并添加下一个，但是我有一个问题，除非我达到limitTo最多4个想法，否则下一个元素不会取代隐藏或移除的项目。 suggestions? 建议？ do I use filter 我使用过滤器
here is my angular file 这是我的角度文件
(function(){
var app = angular.module("moxierevere",['ngCart']);
app.controller("ItemsController", function(){
this.items = allItems;
});
var allItems = [
{
id:0,
name: "item1",
image: "images/br.JPG" ,
price: 2.00,
available: 5,
size: "S , M, L"
},
{
id:1,
name: "item2",
image: "images/avacados.JPG" ,
price: 5.00,
available: 5,
size: "S , M, L"
},
{
id:2,
name: "item3",
image: "images/chicha.JPG" ,
price: 2.00,
available: 0,
size: "S , M, L"
},
{
id:3,
name: "item4",
image: "images/lomo.JPG" ,
price: 6.00,
available: true,
size: "S , M, L"
},
{
id:4,
name: "item5",
image: "images/satuna.JPG" ,
price: 2.00,
available: 5,
size: "S , M, L"
}
];
})();
and here is my html 这是我的html
<body ng-app="moxierevere">
<div ng-controller="ItemsController as item">
<div ng-repeat="all in item.items | limitTo:4" class="allItems" ng-if="all.available > 0">
<ul>
<li class="white ">{{all.name}}</li>
<img ng-src="{{all.image}}" width="120px" height="120px" />
<li class="white ">{{all.price|currency}}</li>
<li class="white">{{all.size}}</li>
<li><button>Add to Cart</button></li>
</ul>
</div>
</div>
here is jsfiddle of it http://jsfiddle.net/wayko/vp32u0yd/ 这是它的jsfiddle http://jsfiddle.net/wayko/vp32u0yd/
Thank you so much for the help 非常感谢你的帮助
2 个解决方案
解决方案1
1 2015-04-15 18:16:21
The problem is the order of events. 问题在于事件的顺序。 First it's limiting item.items , and then processing ngIf on each item in that limited list. 首先是限制item.items ，然后在该受限列表中的每个项目上处理ngIf。 The easiest way is probably just to add a filter that you can insert before limitTo 最简单的方法可能只是添加一个可以在limitTo之前插入的过滤器
myModule.filter('availableItems', function() {
return function(items) {
return items.filter(function(item){
return item.available > 0;
});
};
});
- --
<div ng-repeat="all in item.items | availableItems | limitTo:4" class="allItems">...</div>
解决方案2
1 已采纳 2015-04-15 18:29:45
The problem is the use of the limitTo filter. 问题是使用limitTo过滤器。 This filter is evaluated on your list of items prior to the ngRepeat directive receiving the list. 在ngRepeat指令接收列表之前，将在您的项目列表上评估此过滤器。 The result is that the directive only operates on the first four items in your list. 结果是该指令仅对列表中的前四项起作用。
Probably the cleanest solution would be to create a filter like limitTo that performs both the filtering and limitation functions. 可能最干净的解决方案是创建一个如limitTo的过滤器，该过滤器同时执行过滤和限制功能。
Like this: http://jsfiddle.net/vp32u0yd/3/ 像这样： http : //jsfiddle.net/vp32u0yd/3/
Edit: another approach (thanks to HankScorpio for making me think of this) is to use the filter filter combined with a predicate function. 编辑：另一种方法（感谢HankScorpio使我想到这一点）是将filter器filter器与谓词功能结合使用。
Like this: http://jsfiddle.net/vp32u0yd/6/ 像这样： http : //jsfiddle.net/vp32u0yd/6/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.