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

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>

如您所见，我能够获取数据，检查返回的数据是否为空，但在空的情况下显示另一个 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

更新

此外，您还可以再添加一个标志，它会为您提供有关 ajax 的信息，此外 names 您还可以使用 dataLoaded 标志。在进行 ajax 时将 dataLoaded 值设置为 false，在 ajax 完成后将 dataLoaded 设置为 true。

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

如上例所示，我使用了 ng-if="dataLoaded && (!names || names.length === 0)" 来评估表达式，并且仅当 ajax 完成时才会显示 div 并且名称数组确实具有值或其长度为零（ 0)

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

How do you check if the data is null in http.get in angularjs AND do something?

javascript

jquery

angularjs

angularjs-controller

angularjs-http