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

Tajkumar

我的代码:

<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的新手。

Pankaj Parkar

您可以简单地使用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>

工作朋克

更新

另外,您可以再添加一个标志,除了names可以使用dataLoaded标志之外,它还可以为您提供有关ajax的信息在进行ajax时,将dataLoaded设置为false,在完成ajax之后将其设置dataLoaded为true。

您可以显示或隐藏任何div使用上的HTML ng-showng-hideng-if指令。仅需要在其中指定表达式值,取决于表达式值true / false,它将显示/隐藏该div元素。

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何检查ng-show是否为真,然后在angularjs中执行某些操作

来自分类Dev

如何在angularjs中限制$ http请求?

来自分类Dev

如何在angularjs中覆盖$ http对象

来自分类Dev

如何在angularjs中调试$ http方法

来自分类Dev

如何在angularjs中覆盖$ http对象

来自分类Dev

如何检查某些表是否为空?

来自分类Dev

如何检查某些表是否为空?

来自分类Dev

如何在Java中检查JDBC表中的某些列是否为空

来自分类Dev

如何在Azure Logic App的``是否''条件操作中执行``空''检查

来自分类Dev

如何仅在PHP中检查数据是否为空或空白

来自分类Dev

如何在Firebase数据库中检查愿望清单数据是否为空

来自分类Dev

如何在AngularJS中检查所有字段是否为空

来自分类Dev

如何在Angularjs的$ http.get之外访问结果

来自分类Dev

如何在 angularjs 中使 $http.get Url 动态化

来自分类Dev

AngularJS如何在Http请求中包含标头

来自分类Dev

如何在Angularjs $ http.post中传递参数

来自分类Dev

如何在AngularJS服务Jasmine测试中模拟$ http?

来自分类Dev

如何在AngularJS 2.0中发出HTTP请求

来自分类Dev

如何在angularjs http中添加访问令牌

来自分类Dev

如何在AngularJS中处理异步HTTP调用

来自分类Dev

如何在AngularJS中动态更改$ http服务URL?

来自分类Dev

如何在 PHP 中通过 http 访问从 AngularJS 传递的变量?

来自分类Dev

如何在 AngularJS 中链接两个 http 调用?

来自分类Dev

如何在从文本框中插入数据之前检查列值是否为空

来自分类Dev

如何在Java Play框架中检查数据库表是否为空

来自分类Dev

如何在AngularJS的{{}}中测试对象是否为空?

来自分类Dev

如何在XSLT中检查属性是否为空?

来自分类Dev

如何在tcl中检查变量是否为空

来自分类Dev

如何在tcsh Shell中检查变量是否为空?

Related 相关文章

  1. 1

    如何检查ng-show是否为真,然后在angularjs中执行某些操作

  2. 2

    如何在angularjs中限制$ http请求?

  3. 3

    如何在angularjs中覆盖$ http对象

  4. 4

    如何在angularjs中调试$ http方法

  5. 5

    如何在angularjs中覆盖$ http对象

  6. 6

    如何检查某些表是否为空?

  7. 7

    如何检查某些表是否为空?

  8. 8

    如何在Java中检查JDBC表中的某些列是否为空

  9. 9

    如何在Azure Logic App的``是否''条件操作中执行``空''检查

  10. 10

    如何仅在PHP中检查数据是否为空或空白

  11. 11

    如何在Firebase数据库中检查愿望清单数据是否为空

  12. 12

    如何在AngularJS中检查所有字段是否为空

  13. 13

    如何在Angularjs的$ http.get之外访问结果

  14. 14

    如何在 angularjs 中使 $http.get Url 动态化

  15. 15

    AngularJS如何在Http请求中包含标头

  16. 16

    如何在Angularjs $ http.post中传递参数

  17. 17

    如何在AngularJS服务Jasmine测试中模拟$ http?

  18. 18

    如何在AngularJS 2.0中发出HTTP请求

  19. 19

    如何在angularjs http中添加访问令牌

  20. 20

    如何在AngularJS中处理异步HTTP调用

  21. 21

    如何在AngularJS中动态更改$ http服务URL?

  22. 22

    如何在 PHP 中通过 http 访问从 AngularJS 传递的变量?

  23. 23

    如何在 AngularJS 中链接两个 http 调用?

  24. 24

    如何在从文本框中插入数据之前检查列值是否为空

  25. 25

    如何在Java Play框架中检查数据库表是否为空

  26. 26

    如何在AngularJS的{{}}中测试对象是否为空?

  27. 27

    如何在XSLT中检查属性是否为空?

  28. 28

    如何在tcl中检查变量是否为空

  29. 29

    如何在tcsh Shell中检查变量是否为空?

热门标签

归档