Question

我有一个总是返回20个项目的数组。但是，如果返回的项目少于20个，则返回“”而不是减少数组中的数字。

例如，myArray有20个项目（只有15个值）。

$scope.myArray = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", " ", " ", " ", " ", " "]

我想在某些元素上执行ng-show / hide / if，具体取决于myArray中项目中填充的数量。

最初我试过了：

<div ng-show="myArray.length > 10">
    Show if more than 10 items
</div>

<div ng-show="myArray.length > 15">
    Show if more than 15 items
</div>

<div ng-show="myArray.length > 19">
    Show if more than 19 items
</div>

当然，以上所有内容都会显示，因为总共有20件商品退货。

我是否可以通过ng-show / hide /实现这一点，如果不需要在我的控制器中编写额外的JS？

Answer 1

只需过滤掉空白项目：

var outBlanks = Boolean;

$scope.nonBlanksCount = $scope.myArray.filter(outBlanks).length;

<div ng-show="nonBlanksCount > 10">
    Show if more than 10 items
</div>

我刚刚读到你不想为你的控制器添加任何逻辑。在这种情况下，您可以编写一个自定义过滤器（例如filterBlanks），该过滤器执行与上述相同的操作并执行此操作：

<div ng-show="(myArray | filterBlanks).length > 10">
    Show if more than 10 items
</div>

但是在这种情况下，过滤器会被执行多次，效率不高。

Answer 2

如果您只是像这样扩充数组，它会对你有用吗？

$scope.myArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, "", "", "", ""].filter(Boolean);

检查数组的大小

2 个答案: