DOM manipulation before the template gets modal data

Question

I've a situation where I want to display an error message on the page when my modal don't have any records to show. This could be on the initial load or after applying some filter criteria on the page.

I'm using ng-if to check the count of records on the result set after applying the filter, that is why when my page initially loads as there is no data in the filtered result rest it is showing up the error message first and then later it is showing the data.

Any insight would be highly appreciated

prod.skulist is my modal.

 <ul class="prd-list">
                <li ng-repeat=" p in filtered =(prod.skulist | categoryFilter:prod.selectedFormat :prod.selectedRating) | filter :priceRange" id=" {{p.sku}}">
                    <figure class="prd-img" ng-click="wrapCtrl.showProdDetils(p.sku,prod.catName)">
                        <div style="background-image: url({{wrapCtrl.imageLocation+p.image}}); background-repeat: no-repeat;"></div>
                        <figcaption class="prd-nam f8">{{p.title}}</figcaption>
                        <span class="new-item" ng-show="{{p.isnew}}"><img src="Content/images/new.png" /></span>
                        <span class="new-item" ng-show="wrapCtrl.compareStreetDate(p.streetdate)"><img src="/Content/images/coming-soon.png" /></span>
                    </figure>
                    <div class="prd-price f5">
                        {{p.currentprice | currency}}<span class="sales" ng-show="{{p.onsale}}">ON SALE</span>
                        <span class="cart-btn" ng-click="wrapCtrl.addCart($event)"></span>
                        <div class="inactive-cart-btn" ng-show="wrapCtrl.compareStreetDate(p.streetdate)"></div>
                    </div>
                </li>
                </ul>

<div ng-if="(filtered | filter :priceRange).length ==0" class="error-box">
                    <div class=" wrp"><span class="error-head">I hate when this happens</span></div>
                    <div class="wrp error-message">
                        <span class="f9 pad-top">It looks like I don't have exactly what you are looking for.</span>
                        <span class="f9 pad-bot">try adjusting your filters to see more</span>
                    </div>
                </div>

Answer 1

I ran into a similar situation and found an ugly, though working solution by using the $timeout service. In your case you would have a scope variable, lets call it loadTimeGiven = false and after the $timeout you set it to true. Then simply do

ng-if="(filtered | filter :priceRange).length ==0 && loadTimeGiven"

Alternatively you could set loadTimeGiven based on a service that your modal has access to.