Angularjs隐藏或删除一个项目，然后用列表中的下一个可用项目替换它答案

【问题标题】：Angularjs hide or remove an item then replace it with the next available item on the listAngularjs隐藏或删除一个项目，然后用列表中的下一个可用项目替换它
【发布时间】：2015-06-21 20:13:27
【问题描述】：

如果我有一个元素列表，在 Angularjs 中在其中它有一个数组，其中包含一个名为 available 的项目使用 ng-if 或 ng-show 我想一次显示 3 个元素如果一个元素有 0 个可用项目，则从列表中删除该项目并添加下一个，但我有一个问题，即下一个元素不会取代隐藏或删除的项目，除非我将 limitTo 提高到 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>

这里是它的 jsfiddle http://jsfiddle.net/wayko/vp32u0yd/

非常感谢您的帮助

【问题讨论】：

标签： javascript html angularjs

【解决方案1】：

问题在于limitTo 过滤器的使用。在 ngRepeat 指令接收列表之前，会在您的项目列表上评估此过滤器。结果是该指令仅对列表中的前四项进行操作。

可能最干净的解决方案是创建一个像limitTo 这样的过滤器，它同时执行过滤和限制功能。

像这样：http://jsfiddle.net/vp32u0yd/3/

编辑：另一种方法（感谢 HankScorpio 让我想到这一点）是使用 filter 过滤器和谓词函数。

像这样：http://jsfiddle.net/vp32u0yd/6/

【讨论】：

【解决方案2】：

问题在于事件的顺序。首先它限制item.items，然后在该有限列表中的每个项目上处理ngIf。最简单的方法可能就是在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>

【讨论】：

我不相信这会像写的那样工作。过滤器的 item 参数将是整个数组，而不是单个项目。