Javascript Angularjs隐藏或删除一个项目，然后将其替换为列表中的下一个可用项目_Javascript_Html_Angularjs

Javascript Angularjs隐藏或删除一个项目，然后将其替换为列表中的下一个可用项目

javascript html angularjs

Javascript Angularjs隐藏或删除一个项目，然后将其替换为列表中的下一个可用项目,javascript,html,angularjs,Javascript,Html,Angularjs,在Angularjs中，如果我有一个元素列表其中有一个数组，其中有一个名为available的项使用ng if或ng show，我希望一次显示3个元素如果一个元素有0个可用项，那么将该元素从列表中删除并添加下一个，但我遇到了一个问题，即下一个元素不会取代隐藏或删除的项，除非我将限制提高到4 有什么想法吗？建议？我使用过滤器吗这是我的角锉 (function(){ var app = angular.module("moxierevere",['ngCart']); app.co

在Angularjs中，如果我有一个元素列表其中有一个数组，其中有一个名为available的项使用ng if或ng show，我希望一次显示3个元素如果一个元素有0个可用项，那么将该元素从列表中删除并添加下一个，但我遇到了一个问题，即下一个元素不会取代隐藏或删除的项，除非我将限制提高到4 有什么想法吗？建议？我使用过滤器吗

这是我的角锉

    (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"
}
];
})();

这是我的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>



{{all.name}
{{all.price | currency}
{{all.size}
添加到购物车

这是其中之一

非常感谢您的帮助

问题在于事件的顺序。首先，它限制

项。项

，然后对该限制列表中的每个项处理ngIf。最简单的方法可能就是在

limito

myModule.filter('availableItems', function() {
  return function(items) {
    return items.filter(function(item){
        return item.available > 0;
    });
  };
});

。。。

问题在于使用了

limito

过滤器。在ngRepeat指令接收列表之前，将在项目列表上评估此筛选器。结果是该指令仅对列表中的前四项起作用

最干净的解决方案可能是创建一个类似

limito

的过滤器，它同时执行过滤和限制功能

像这样：

编辑：另一种方法（感谢HankScorpio让我想到这一点）是将

过滤器

过滤器与谓词函数结合使用

像这样：

我认为这不会像写的那样起作用。过滤器的

item

参数将是整个数组，而不是单个项。

<div ng-repeat="all in item.items | availableItems | limitTo:4" class="allItems">...</div>