為什么這個簡單的 AngularJS ng-show 無法顯示子列表？

Question

我不明白為什么這個 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); } }); };

Answer 1

$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 布局的。