1

Seems like modals in Angular UI is difficult to update, previously in Bootstrap I could update via jQuery but in Angular UI, not able to do even a simple update.

I have <span id="spnApproveSelectedCount">0</span> inside my modal-body, and I update it using jQuery $('#spnApproveSelectedCount').text(selectedCount); like this. It was working in Bootstrap but not in Angular UI.

Even update from $scope is not working if that variable is inside the modal. But if I moved them outside of modal it is working. I suspect it is because the modal is not display yet?

Updated:

I have a repeat in which the each item is clickable. When user clicked on it, it's supposed to open up the modal with further info. Below are my codes.

<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>

Notice that I have the ng-click on the row and below are my codes at controller.

$scope.SetDetails = function(current)
  {
      $scope.details = current;
  }

And also partial of my modal code.. 

<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">&times;</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>

Before everything, in fact in my controller I have a line of code to pre-set the details variable to take the first element (before it is passed to ng-repeat), this works and when the modal open, it is showing the first element value and that's it, the value stays there even if I click on row 2, 3 ...

$scope.details = $scope.approvals[0];
TPG
  • 2,811
  • 1
  • 31
  • 52
  • 4
    My advice to you: remove jQuery from the project and learn how to think more in Angular way. Briefly: you don't want to perform any DOM manipulations like you are trying to. In your case you don't really need jQuery and update it manually, instead Angular directives and interpolations `{{}}` should be used. Check this post for useful start: http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background – dfsq Aug 13 '15 at 08:14
  • I have to agree with @dfsq, sure jQuery lite is included in angular, and should only be used in directives to manipulate the current element. – Robin Jonsson Aug 13 '15 at 08:16
  • *But if I moved them outside of modal it is working*. Can you show the working code? – Roman C Aug 13 '15 at 08:21
  • Thanks guys, I have added in my code at the original post for more insight. This is another issue which modal is not updated. I believe this is angular way of doing thing? @RomanC, what I mean about moving outside of modal is as simple as copy {{ details.category }} and put it maybe the line before
    . It gets updated everytime I clicked and open the modal, yet the modal value stays the same for other variable.
     – TPG Aug 13 '15 at 09:00

0 Answers0