Question

我的代码：

<script>  
 function  customersController($scope, $http) {
        $http.get("https://tic.com/testingservice/HttpService.svc/operator/Var1/Var2")
        .success(function (response) { $scope.names = response; });
    }
 </script>

<table class="plansbox" cellspacing="0" rules="all" id="ctl00_ContentPlaceHolder1_FULLTALKTIME" style="border-width:0px;width:100%;border-collapse:collapse;">
        <tbody><tr class="rechargeplansheader">
            <th scope="col">AMOUNT</th><th scope="col">TALKTIME</th><th scope="col">VALIDITY</th><th scope="col">DESCRIPTION</th>
        </tr><tr class="GridRow" ng-repeat="x in names | filter: { plantype: 'TopUp' }" onclick="label1('220');" style="font-family:Verdana;cursor: pointer; cursor: hand;">
            <td style="width:10%;">

                <span id="ctl00_ContentPlaceHolder1_FULLTALKTIME_ctl02_lblAmount" style="font-weight:bold;">{{ x.Amount }}</span>
                </td><td style="width:10%;">
                <span id="ctl00_ContentPlaceHolder1_FULLTALKTIME_ctl02_lbltalktime" style="font-weight:bold;">{{x.Talktime }}</span>
                </td><td style="width:10%;">
                <span id="ctl00_ContentPlaceHolder1_FULLTALKTIME_ctl02_lblvalidity" style="font-weight:bold;">{{ x.Validity }}</span>
                </td><td style="width:70%;">
                <span id="ctl00_ContentPlaceHolder1_FULLTALKTIME_ctl02_lbldescription">{{ x.Description}}</span>
                </td>
        </tr>
    </tbody></table>

正如您所看到的，我能够获取数据，检查返回的数据是否为null，但是在null情况下显示另一个div。

请帮助我，我是angularjs的新手。

Answer 1

您可以简单地使用ng-if="!names"，也可以更好地维护一个标志，该标志将为您提供有关获取ajax的数据的信息。＆安培;当找不到数据 div

时，这可能非常有用

<强>控制器

var customersController($scope, $http) {
    $scope.dataLoaded = false; //data loading done or not
    $http.get("https://tic.com/testingservice/HttpService.svc/operator/Var1/Var2")
    .success(function(response) {
      $scope.dataLoaded = true;
      $scope.names = response;
    });
}

app.controller('customersController', ['$scope', '$http', customersController]);

<强>标记

  <table class="plansbox" cellspacing="0" rules="all" id="ctl00_ContentPlaceHolder1_FULLTALKTIME" style="border-width:0px;width:100%;border-collapse:collapse;">
    <thead>
      <tr class="rechargeplansheader">
        <th scope="col">AMOUNT</th>
        <th scope="col">TALKTIME</th>
        <th scope="col">VALIDITY</th>
        <th scope="col">DESCRIPTION</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-if="dataLoaded && (!names || names.length === 0)" colspan="4">
        <td>No data found</td>
      </tr>
      <tr class="data-loading" ng-if="!dataLoaded" colspan="4">
        <td>Data is loading</td>
      </tr>
      <tr ng-if="dataLoaded" class="GridRow" ng-repeat="x in names | filter: { plantype: 'TopUp' }" onclick="label1('220');" style="font-family:Verdana;cursor: pointer; cursor: hand;">
        <td style="width:10%;">
          <span id="ctl00_ContentPlaceHolder1_FULLTALKTIME_ctl02_lblAmount" style="font-weight:bold;">{{ x.Amount }}</span>
        </td>
        <td style="width:10%;">
          <span id="ctl00_ContentPlaceHolder1_FULLTALKTIME_ctl02_lbltalktime" style="font-weight:bold;">{{x.Talktime }}</span>
        </td>
        <td style="width:10%;">
          <span id="ctl00_ContentPlaceHolder1_FULLTALKTIME_ctl02_lblvalidity" style="font-weight:bold;">{{ x.Validity }}</span>
        </td>
        <td style="width:70%;">
          <span id="ctl00_ContentPlaceHolder1_FULLTALKTIME_ctl02_lbldescription">{{ x.Description}}</span>
        </td>
      </tr>
    </tbody>
  </table>

Working Plunkr

<强>更新

此外，您还可以添加一个标记，除了names之外，还可以使用dataLoaded标记为您提供有关ajax的信息。当ajax正在进行时，将dataLoaded值设置为false，在完成ajax set dataLoaded后为true。

您可以使用div，ng-show或ng-hide指令在html上显示或隐藏任何ng-if。只需要在其中指定表达式值，取决于表达式值true / false它将显示/隐藏div元素。

如上例所示，我使用ng-if="dataLoaded && (!names || names.length === 0)"来评估表达式，并仅在ajax完成时显示div＆amp; names数组确实有值或其长度为零（0）

你如何检查angularjs中的http.get中的数据是否为空并执行某些操作？

1 个答案: