似乎Angular UI中的模态很难更新,以前在Bootstrap中我可以通过jQuery更新,但在Angular UI中,甚至无法进行简单的更新。
我的模态体内有<span id="spnApproveSelectedCount">0</span>
,我使用jQuery $('#spnApproveSelectedCount').text(selectedCount);
更新它。它在Bootstrap中工作,但在Angular UI中没有。
如果该变量位于模态内,即使从$ scope更新也无效。但是如果我将它们移到模态之外就可以了。我怀疑是因为模态还没有显示呢?
更新
我重复一遍,每个项目都是可点击的。当用户点击它时,它应该用更多信息打开模态。以下是我的代码。
<div class="list-group">
<div ng-repeat="approval in approvals" class="list-group-item">
<div class="row">
<div class="selectable" style="float: left; width: 95%" ui-turn-on="detailsModal" ng-click="SetDetails(approval)">
<p class="list-group-item-text"><b>Ref</b> <span>{{ approval.ref }}</span></p>
<p class="list-group-item-text"><b>Pay To</b> <span>{{ approval.payTo }}</span></p>
<p class="list-group-item-text"><b>From</b> <span>{{ approval.from }}</span></p>
</div>
</div>
</div>
</div>
请注意,我在行上单击了ng,而下面是我在控制器上的代码。
$scope.SetDetails = function(current)
{
$scope.details = current;
}
也是我的模态代码的一部分..
<div class="modal" ui-if="detailsModal" ui-state='detailsModal'>
<div class="modal-backdrop in"></div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" ui-turn-off="detailsModal">×</button>
<h4 class="modal-title">Transaction Details</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-5">
Type
</div>
<div class="col-sm-7">
<b>{{ details.category }}</b>
</div>
</div>
<br />
<div class="row">
<div class="col-sm-5">
Submitted By
</div>
<div class="col-sm-7">
<b>{{ details.submittedBy }}</b>
</div>
</div>
在所有事情之前,实际上在我的控制器中我有一行代码来预先设置详细信息变量以获取第一个元素(在传递给ng-repeat之前),这是有效的,当模态打开时,它是显示第一个元素值及其值,即使我点击第2,3行,该值也会保留在那里......
$scope.details = $scope.approvals[0];