【发布时间】：2020-07-02 06:51:46
【问题描述】：
我不明白为什么这个 AngularJS 应用程序不能按预期工作。 “showPanelSubSystem”应该在其值为真时显示每个子列表，但它不起作用。我必须显示从查询字符串获得的每个项目的面板列表到我的页面。所以我有一个 TarrifTopSystemList来自后端硬代码。然后我在我的 div 标签中添加一个 ng-repeat 以显示主列表。为了显示 div 我使用 ng-show = "topSystem.showPanel" 。为了显示我提到的作为 SubSystemList 的 TarrifTopSystemList 的子列表，我使用 ng-show = "ng-show="subSystem.showPanelSubSystem" 。
html：
<div ng-repeat="topSystem in TarrifTopSystemList" class="padInBox">
<div class="panel panel-default">
<div class="panel-heading1">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse_{{$index}}"
ng-click="showPanelCk(topSystem,$event)"
style="color:#f7fafb !important; text-decoration : none !important"
class="glyphicon glyphicon-plus">
<label> <b>{{topSystem.TopSystemName}}</b></label>
</a>
</h4>
</div>
<div class="panel-collapse collapse in"
style="" id="collapse_{{$index}}">
<div class="panel-body" style="background: linear-gradient(to right, #304352, #d7d2cc);"
ng-show="topSystem.showPanel">
<div class="row ">
<div class="col-md-12 rtlPart">
<div>
<div class="row" style="margin:0;"
ng-repeat="subSystem in topSystem.SubSystemList">
<div class="panel-heading1">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse_{{$index}}_{{$parent.$index}}"
ng-click="showPanelCk1(subSystem,$event)"
style="color:#f7fafb !important; text-decoration : none !important"
class="glyphicon glyphicon-plus">
<label style="color: white !important;">
<b style="color: white !important;">{{subSystem.SubSystemName}}</b>
</label>
</a>
</h4>
</div>
<div ng-show="subSystem.showPanelSubSystem">
<div class="panel-collapse collapse"
ng-class="{'panel-collapse collapse in' : ($index == 0 && $parent.$index == 0)}"
id="collapse_{{$index}}_{{$parent.$index}}">
<div class="panel-body" style="background-color: whitesmoke !important">
<div class="row ">
<div class="col-md-12 rtlPart">
<div>
<div class="row" style="margin:0;">
<div class="panel-heading1">
<table class="table table-bordered table-responsive">
<tr>
<td></td>
<td style="width: 50px !important;">Payment Code</td>
<td style="width: 700px !important;">Payment Type</td>
<td style="width: 50px !important;">Amount</td>
<td></td>
</tr>
<tr ng-repeat="paymentType in subSystem.PaymentTypeList"
ng-class="{'succeedColor': paymentType.PaymentTarrifCodeInfo.IsPaid == true &&
((paymentType.PaymentTarrifCodeInfo.IsOnline && paymentType.PaymentTarrifCodeInfo.BankResultCode == 0) ||
((!paymentType.PaymentTarrifCodeInfo.IsOnline && paymentType.PaymentTarrifCodeInfo.BankResultCode == 2))),
'pendingColor': paymentType.PaymentTarrifCodeInfo.BankResultCode == 1,
'rejectedColor':(paymentType.PaymentTarrifCodeInfo.BankResultCode == 3 ||
paymentType.PaymentTarrifCodeInfo.BankResultCode == -1)}">
<td>
<input type="checkbox" name="select"
ng-model="paymentType.IsSelected" />
</td>
<td style="width: 50px !important;">
<label style="color: white !important;">
<b style="color: black !important;">{{paymentType.PaymentTypeId}}</b>
</label>
</td>
<td style="width: 700px !important;text-align: right;" dir="auto">
<label style="color: white !important;">
<b style="color: black !important;">{{paymentType.PaymentTypeName}}</b>
</label>
</td>
<td style="width: 50px !important;">
<label style="color: white !important;">
<b style="color: black !important;">{{paymentType.Amount}}</b>
</label>
</td>
<td>
<button ng-click="showModalPayment($index,$parent.$index,$parent.$parent.$index)"
class="btn btn-success"
ng-disabled="!paymentType.IsSelected"
ng-show="!paymentType.PaymentTarrifCodeInfo.IsPaid &&
paymentType.PaymentTarrifCodeInfo.BankResultCode != 2">
پرداخت
</button>
<!--paymentType.PaymentTarrifCodeInfo.PaymentId,paymentType.PaymentTypeName-->
<button ng-click="onShowPayStatus($index,$parent.$index,$parent.$parent.$index)"
class="btn btn-info"
ng-show="paymentType.IsSelected &&
paymentType.PaymentTarrifCodeInfo.PaymentId">
استعلام پرداخت
</button>
</td>
</tr>
</table>
</div>
<div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>js:
define(['app'], function (app) {
app.register.controller('TarrifPaymentListController',
[
'$scope',
'$window',
'$translate',
'dataService',
'$routeParams',
'$rootScope',
'toaster',
'$location',
'modalService',
'$timeout',
function ($scope, $window, _, dataService, $routeParams, $rootScope,
toaster, $location, modalService, $timeout) {
$scope.viewModel = {};
var requestId = $location.search().id;
var refCode = $location.search().ReferenceCode;
var requestPrefix = refCode.split("-")[0];
var requestType;
if (requestPrefix == "AMO") {
requestType = 1
}
else if (requestPrefix == "MF") {
requestType = 0
}
else if (requestPrefix == "MG") {
requestType = 3
}
else {
requestType = 4
}
var getTarrifList = function (requestId, requestType) {
var en = {
ReuestId: requestId,
ReuestType: requestType
};
dataService.save(en, 'api/RequestPayment/GetTarrifCodeList/')
.then(function (data) {
if (data.Succeed) {
$scope.TarrifTopSystemList = data.TarrifTopSystemList;
$scope.TarrifTopSystemList[0].showPanel = true;
if (requestType == 1) {
$timeout(function () {
$scope.TarrifTopSystemList[0].SubSystemList[0].showPanelSubSystem = true;
});
}
else if (requestType == 0) {
$timeout(function ($scope) {
debugger;
$scope.TarrifTopSystemList[0].SubSystemList[1].showPanelSubSystem = true;
},);
}
} else {
toaster.pop('error', _("Dataservice_TTL_Save"), data.Message);
}
});
};【问题讨论】：
-
请添加一个有效的 jsfiddle 并将您的 API 数据硬编码到服务中。这样我们就可以看到您的错误是什么。谢谢你可以把上面的代码放在这里jsfiddle.net/Lt7aP/4它的样板来运行angularjs。
标签： javascript html angularjs