Angular: <select ng-required="options.length"> with filter

Question

I have:

<select name="club" id="club" ng-model="currentUser.club_id" ng-options="club.id as club.name for club in clubs | filter:{ country_id: currentUser.country_id }" required></select>

I'm happy with that, except that since I filter the clubs list, there are cases where <select> has no <option>, which implies that the required attribute makes the form unsubmittable.

I could do

<select ng-required="(clubs | filter:{ country_id: currentUser.country_id }).length"></select>

but I though maybe there is a more elegant way to do that. Something like:

<select ng-required="$element.options.length"></select>

Is my intuition correct? What's the way to do that?

Answer 1

You can simply try

ng-repeat="item in filtered = (items | filter:filterExpr)"

and then use

filtered.length

This works for ng-options too !

Hope this was helpful

Reference Filter Length