Checking size of an array

Question

I have an array that always returns 20 items. However, if fewer than 20 items are returned, a " " is returned rather than reducing the number in the array.

For example, myArray with 20 items (only 15 values).

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

I want to perform an ng-show/hide/if on some elements depending on the number of populated in the items in myArray.

Originally I tried:

<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>

Naturally, all of the above will show as there are always 20 items returned.

Can I achieve this with an ng-show/hide/if and without having to write additional JS in my controller?

Answer 1

Just filter out blank items:

var outBlanks = Boolean;

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

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

I just read that you did not want to add any logic to your controller. In this case, you could write a custom filter (e.g. filterBlanks) which does the same thing as above and do:

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

However in this case, the filter would be executed multiple times, which is not very efficient.

Answer 2

Would it work for you if you simply augment your array like this?

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