AngularJS - перезагрузка div без перезагрузки страницы - PullRequest
Новая
       36

AngularJS - перезагрузка div без перезагрузки страницы

0 голосов
/ 11 декабря 2018

Наша команда разрабатывает виджет вопросника в ServiceNow и хотела бы, чтобы определенный элемент div появлялся, когда пользователь заполняет вопросник без перезагрузки всей страницы.

Весь код довольно длинный, но это тот конкретный div, который должен появиться после отправки вопросника: 

<div align="center" ng-if="taskCompleted == true" class="infoDiv">
          <div class="mainTitle first">Task Complete!</div>
          <div class="subTitle second" style="max-width: 600px;">This task was completed on: {{params.taskCompleteDate.split(" ")[0]}}</div>
          <!-- Add section to indicate they can review their answers here-->
          <div align="left" style="margin-top: 40px; font-size: 16px; color: #979797;">
            Review Completed Questionnaire Below:
          </div>
          <div style="height: 500px; overflow-y: scroll; margin-top: 10px; border: 1px solid #eeeeee; border-radius: 2px;" align="left">
            <div ng-repeat="item in completedQuest track by $index" style="padding-top: 5px; padding-bottom: 20px; padding-left: 15px; min-width: 400px; border-bottom: 1px solid #eeeeee; margin-bottom: 10px;" ng-if="item.ans">
              <table>
                <tr>
                  <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>
                  <!--<td rowspan="2" style="color: #979797; padding-right: 15px; cursor: pointer;" ng-click="showPrerenderedDialog2('#editQuestion', item.quest_id)"><span class="glyphicon glyphicon-pencil" title="Edit Answer" style="padding-right: 5px;"></span></td>-->
                  <td style="color: #336796;"><span class="glyphicon glyphicon-question-sign" title="Question mark icon" style="padding-right: 5px;"></span></td>
                  <td><span style="color: #717171;">{{item.quest}}</span></td>
                </tr>
                <tr>
                  <td style="padding-top: 10px; color: green;"><span class="glyphicon glyphicon-ok-circle" title="Check mark icon" style="padding-right: 5px;"></span></td>
                  <!--<td style="padding-top: 10px;"><span style="color: black;">{{item.answer}}</span></td>-->
                  <td style="padding-top: 10px;"><span style="color: black;">{{item.ans}}</span></td>
                </tr>
              </table>
            </div>
          </div>
        </div>

Прямо сейчас, когда пользователь заполнит вопросник, он увидитуниверсальное сообщение с благодарностью: 

<div style="padding-bottom: 25px;" ng-if="params.finishQs" ng-class="params.questClass">
          Thank you for your responses!
</div>

И потребуется Ctrl-R обновить страницу, чтобы увидеть вышеупомянутый div, который позволяет им редактировать ответы.Есть ли способ, чтобы этот div показывался без перезагрузки всей страницы?Я довольно новичок в angularjs, поэтому любые советы / предложения полезны, спасибо!

1 Ответ

0 голосов
/ 11 декабря 2018

После заполнения формы просто установите 

$scope.taskCompleted = true;

Или вы можете сделать это в формате html 

<button ng-click="taskCompleted=true;">Complete</button>

PS Моя рекомендация не использовать выражения {{}}.Вместо этого используйте ng-bind для лучшей производительности.

...