检查数组的大小

Question

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

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

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

我想根据 myArray 中填充的项目数对某些元素执行 ng-show/hide/if。

最初我尝试过：

<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/if 来实现这一点，而不必在我的控制器中编写额外的 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);