Currently, I have a basic ul that utilizes ng-repeats to display li elements fetched from an external source via a promise. There is also a search input present which filters these elements, and I want the ul to be hidden when there are no more elements that match the search criteria.
I attempted to create a directive for this purpose, but unfortunately, it's not functioning as expected:
.directive('predictive', function() {
return {
restrict: 'A',
link: function(scope, element) {
console.log(element);
if (!$(element).children("li").length) {
$(element).hide();
}
}
}
});
The issue with this directive is that it hides everything too quickly, before the data service has populated the list with li's.
Is there anything I can do to resolve this?
UPDATE: Here is the code snippet:
<input type="text" ng-model="predictiveSearch"></input>
<ul ng-repeat="(key, option) in Service1.predictive" predictive>
<span><b>{{key}}</b></span>
<li ng-repeat="option in option | filter:predictiveSearch">
<a href="" ng-click="handlePredictiveSelection(option)">{{option}}</a>
</li>
</ul>