CODEWITHSUNDEEP
angularjsmodal-dialogservicenowangularjs-materialmddialog
Dave
Dave

Reputation: 1277

Using mdDialog with ng-repeat keeps displaying the same information from first click

Our team is building an app in ServiceNow and using AngularJS Material. We built a questionnaire that allows users to make edits to answers at the end. For the questions that can be edited, we're trying to use mdDialog that brings up a modal window where a user can edit their answers. The issue we're running into is that when a user clicks to edit an answer, then closes that modal to open up another answer to edit, the modal opens the first answer every time. We can't seem to close that scope to open another one.

In our HTML, we have a pencil glyphicon that has an ng-click for a function editQuestionFnct:

<td rowspan="2" style="color: #979797; padding-right: 15px; cursor: pointer;" ng-click="editQuestionFnct(item.quest_id)"><span class="glyphicon glyphicon-pencil" title="Edit Answer" style="padding-right: 5px;"></span></td>

That editQuestionFnct passes in several items into the showPrerenderedDialog function that generates the modal:

$scope.editQuestionFnct = function(val){
        $scope.editWidget = {};
        spUtil.get("gateway_questionnaire_widget", {//call new instance of this widget
            task_id: $scope.data.task_id,
            quest_id: val,
            request: 'edit',
            taskTable: $scope.data.task_table,
            questionnaire_table: $scope.params.questionnaireTable,
            serviceID: $scope.params.serviceID,
            refID: $scope.params.refID,
            taskCompleted: false,
            editRequest: true
        }).then(function(response) {
            $scope.editWidget = response;//var to hold widget response to display in modal
            $scope.showPrerenderedDialog('#editQuestion');
        });
    }

The showPrerenderedDialog function renders the modal:

$scope.showPrerenderedDialog = function(name) {
    $mdDialog.show({
        contentElement: name,
        parent: angular.element(document.body),
        clickOutsideToClose:true
    });
};

Here is the md-dialog template:

<div style="visibility: hidden">
    <div class="md-dialog-container" id="editQuestion">
      <md-dialog style="background-color: #ffffff;" aria-label="edit dialog">
        <md-toolbar style="background-color: #022C68; width: 100%;">
          <h1 class="md-toolbar-tools" style="color: #ffffff;">Edit Response</h1>
        </md-toolbar> 
        <md-dialog-content style="background-color: #ffffff;">
          <!--<div id="editQuestDiv" style="min-width: 700px;">-->
            <sp-widget widget="editWidget"></sp-widget>
          <!--</div>-->
        </md-dialog-content>
        <md-dialog-actions layout="row">
          <span flex></span>
          <md-button ng-click="closeDialog()" class="md-primary md-raised">
            Close
          </md-button>
        </md-dialog-actions>
      </md-dialog>
    </div>

What am i missing from the above code so that I can open one modal for a specific question and then open up another modal with another question? Thanks.

Upvotes: 0

Views: 181

Answers (0)

Related Questions