javascript - 为什么这个简单的 AngularJS ng-show 不能显示子列表？
问题描述
我不明白为什么这个 AngularJS 应用程序不能按预期工作。“ showPanelSubSystem ”应该在其值为真时显示每个子列表，但它不起作用。我必须显示从查询字符串获得的每个项目的面板列表到我的页面。所以我有一个来自后端硬代码的 TarrifTopSystemList。然后我在我的 div 标签中添加一个 ng-repeat 来显示 main list 。为了显示 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);
}
});
};解决方案
$scope.TarrifTopSystemList[0].SubSystemList[0].showPanelSubSystem = true
似乎您只设置了第一项，无论是显示还是取消显示。如果您想使用 ng-repeat 在 TarrifTopSystemList 中设置每个面板显示或取消显示，您应该将每个 TarrifTopSystemList 设置为 set。
$scope.TarrifTopSystemList[0].SubSystemList[0].showPanelSubSystem = true; $scope.TarrifTopSystemList[1].SubSystemList[0].showPanelSubSystem = false;
如果您发布希望布局图像和当前实际图像，我们可以轻松理解并正确响应，因为您的问题是关于 GUI 布局的。
推荐阅读
- javascript - RegExp 第一个字符不能是点，只能是数字
- smartcontracts - 请告诉我有关智能资产的信息
- .htaccess - 如何使用 htaccess 重定向到一个空的 url
- windows - 当拒绝任何文件夹的权限时，cacls 或 icacls 使子文件夹仍然可以访问。任何解决方法？
- linux - 查询 mmap() 分配的大小
- python - 增加 sigmoid 预测输出值？
- graphql - 如何使用 Aws AppSync 将 JTW 令牌（或任何其他变量）从父解析器传递给子解析器
- sql - 使用查询检索当前值和以前的值
- azure - 如何修复“Azure 函数输出适配器无法写入事件”
- python - How can I solve the blocking problem on the client part in a TCP socket in python?