Question

如果我有一个元素列表，在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>

这是jsfiddle http://jsfiddle.net/wayko/vp32u0yd/

非常感谢您的帮助

Answer 1

问题在于事件的顺序。首先，它限制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>

Answer 2

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

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

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

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

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

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

2 个答案: