时间戳

首页 > 解决方案 > AngularJS - 重新加载div而不重新加载页面

angularjs - AngularJS - 重新加载div而不重新加载页面

问题描述

我们的团队正在 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 很陌生，所以任何建议/建议都很有帮助，谢谢！

标签： angularjsasynchronouspage-refreshservicenow

解决方案

完成表格后刚刚设置

$scope.taskCompleted = true;

或者您可以在 html 中执行此操作

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

PS 我建议不要使用表达式 {{}}。而是使用 ng-bind 以获得更好的性能。

推荐阅读