DOM 模板获取模态数据前的操作

Question

当我的模式没有任何记录可显示时，我想在页面上显示一条错误消息。这可能是在初始加载时或在页面上应用某些过滤条件之后。

我在应用过滤器后使用 ng-if 检查结果集上的记录数，这就是为什么当我的页面最初加载时，因为过滤结果中没有数据，它显示了首先是错误消息，然后是显示数据。

任何见解将不胜感激

prod.skulist 是我的模式。

 <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

我运行遇到了类似的情况，并通过使用 $timeout 服务找到了一个丑陋但可行的解决方案。在您的情况下，您将有一个范围变量，我们将其称为 loadTimeGiven = false 并在 $timeout 之后将其设置为 true。然后简单地做

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

或者，您可以根据您的模式有权访问的服务设置 loadTimeGiven。

DOM 模板获取模态数据前的操作

DOM manipulation before the template gets modal data

angularjs

angular-ng-if