我的代码:
<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的新手。
您可以简单地使用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-show
,ng-hide
或ng-if
指令。仅需要在其中指定表达式值,取决于表达式值true / false,它将显示/隐藏该div
元素。
如上例所示,我使用ng-if="dataLoaded && (!names || names.length === 0)"
了评估表达式的表达式,将显示div
仅当ajax完成且名称数组确实具有值或其长度为Zero(0)时,
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句