Question

您好我使用以下代码。我在获取显示<h2> No detail found</h2>的数据时从http get请求获取数据，然后在从服务器获取数据后，它显示列表中的获取数据。

我希望在http get请求完成之前避免显示<h2> No detail found</h2>。

<div ng-controller="expCont">
     <ul>
        <div  ng-repeat="n in expenses">
         <li class="list-group-item">
           {{n.name}}{{n.price}}
         </li>
        </div>
       </ul>  
      <div ng-show="!expenses.length">
            <h2> No detail found</h2>                       
      </div>
</div>

如何做到这一点。

Answer 1

使用 ng-if

<div ng-if='expenses'>
   <ul>
    <div  ng-repeat="n in expenses">
     <li class="list-group-item">
       {{n.name}}{{n.price}}
     </li>
    </div>
   </ul>  
  <div ng-show="!expenses.length">
        <h2> No detail found</h2>                       
  </div>
</div>

Answer 2

您可以尝试不同的方法：

在您的控制器中：

  app.controller('expCont', function($scope) {
      $scope.loading = false;
        $scope.getData = function() {
          $scope.loading = true;
          //your http request
           $scope.loading = false;
        };
        $scope.getData();
      })

在模板中：

   <div ng-controller="expCont">
         <ul>
             <li ng-if="!loading && expenses.length > 0" ng-repeat="n in expenses" class="list-group-item">
               {{n.name}}{{n.price}}
             </li>
           </ul>  
          <div ng-if="expenses.length == 0 && !loading">
                <h2> No detail found</h2>                       
          </div>
          <div ng-if="loading">
                <h2> Loading...</h2>                       
          </div>
    </div>

Answer 3

只需尝试这个

<div ng-show="expenses != NULL && expenses != undefined && expenses.length === 0">
  <h2> No detail found</h2>                       
</div>

http请求完成后，Angular显示数据

3 个答案: