AngularJs - 带有 ng-repeat 的表单不允许在 ng-repeat 结束后出现任何元素

Question

我在 angularjs 中创建了一个调查填写表格。我使用 ng-repeat 来显示问题、它们的选项和评论框。问题是在我想放置提交按钮的表单之后，我尝试将它放在 ng-repeat 结束后的所有位置，但它没有出现在屏幕上的任何位置，也没有在检查元素中可见。我试着放一个简单的

或者 , 那也不显示。

我曾在多个地方使用过 ng-repeat，而这从未发生过……

请你帮忙！

<div class="page-container">
  <!-- START PAGE SIDEBAR -->
  <div ng-include="'sidebar.html'"></div>
  <!-- END PAGE SIDEBAR -->
  <!-- PAGE CONTENT -->
  <div class="page-content">
    <!-- START X-NAVIGATION VERTICAL -->
    <ul class="x-navigation x-navigation-horizontal">
      <!-- TOGGLE NAVIGATION -->

      <!-- END TOGGLE NAVIGATION -->
      <!-- SEARCH -->

      <!-- END SEARCH -->
      <!-- SIGN OUT -->
      <li class="xn-icon-button pull-right">
        <a href="" ng-click="signOut()" class="mb-control" data-box="#mb-signout"><span class="fa fa-sign-out"></span></a>
      </li>
      <li class="xn-icon-button pull-right">
        <span><h6 style="color:white;">{{adminName}}</h6></span>
      </li>
      <li class="xn-icon-button pull-right">
        <span><img class="img-responsive img-rounded" src="assets/images/users/no-image.jpg" style="margin-top:-6px;"></span>
      </li>
      <!-- END SIGN OUT -->
    </ul>
    <!-- END X-NAVIGATION VERTICAL -->

    <!-- PAGE CONTENT WRAPPER -->
    <div class="page-content-wrap">


      <div class="col-md-12">

        <form class="form-horizontal" name="userForm">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title"><strong>Fill Survey</strong></h3>
              <ul class="panel-controls">


              </ul>

            </div>

            <div loading-indicator class="waiting-box" ng-show="load"><span><img src="assets/images/users/MnyxU.gif" style="max-height:50px; margin-left:50%;"/></span></div>
            <div class="panel-body form-group-separated">
              <div ng-repeat="x in surveyy">
                <div class="form-group">
                  <label class="col-md-3 col-xs-12 control-label">Question {{$index+1}}</label>
                  <div class="col-md-7">

                    <h6>{{x.statement}}</h6><br>
                    <div>
                      <input type="radio" id="1" name="option{{x.id}}" value="1" ng-model="questions[$index].enpsValue" />&emsp;

                      <input type="radio" id="2" name="option{{x.id}}" value="2" ng-model="questions[$index].enpsValue" />&emsp;

                      <input type="radio" id="3" name="option{{x.id}}" value="3" ng-model="questions[$index].enpsValue" />&emsp;

                      <input type="radio" id="4" name="option{{x.id}}" value="4" ng-model="questions[$index].enpsValue" />&emsp;

                      <input type="radio" id="5" name="option{{x.id}}" value="5" ng-model="questions[$index].enpsValue" />&emsp;

                      <input type="radio" id="6" name="option{{x.id}}" value="6" ng-model="questions[$index].enpsValue" />&emsp;

                      <input type="radio" id="7" name="option{{x.id}}" value="7" ng-model="questions[$index].enpsValue" />&emsp;

                      <input type="radio" id="8" name="option{{x.id}}" value="8" ng-model="questions[$index].enpsValue" />&emsp;

                      <input type="radio" id="9" name="option{{x.id}}" value="9" ng-model="questions[$index].enpsValue" />&emsp;

                      <input type="radio" id="10" name="option{{x.id}}" value="10" ng-model="questions[$index].enpsValue" /><br>

                      <label for="1">1</label>&emsp; &nbsp;
                      <label for="2">2</label>&emsp; &nbsp;
                      <label for="3">3</label>&emsp; &nbsp;
                      <label for="4">4</label>&emsp; &nbsp;
                      <label for="5">5</label>&emsp; &nbsp;
                      <label for="6">6</label>&emsp; &nbsp;
                      <label for="7">7</label>&emsp; &nbsp;
                      <label for="8">8</label>&emsp; &nbsp;
                      <label for="9">9</label>&emsp; &nbsp;
                      <label for="10">10</label>
                    </div>
                  </div>
                </div>


                <div ng-if="questions[$index].enpsValue<8">
                  <div class="form-group">
                    <label class="col-md-3 col-xs-12 control-label">Select Reason</label>
                    <div class="col-md-7">
                      <div class="input-group">

                        <select ng-model="questions[$index].answer" class="form-control" class="select">
                                                        <option value="1">{{x.option1}}</option>
                                                        <option value="2">{{x.option2}}</option>
                                                        <option value="3">{{x.option3}}</option>
                                                        <option value="4">{{x.option4}}</option>
                                                        <option value="5">{{x.option5}}</option>

                                                    </select>
                        <span class="input-group-addon"><span class="fa fa-chevron-circle-down"></span></span>
                      </div>
                    </div>
                  </div>

                  <div class="form-group">
                    <label class="col-md-3 col-xs-12 control-label">Add a Comment</label>
                    <div class="col-md-7">
                      <textarea class="form-control" rows="5" name="comment" ng-model="questions[$index].comments" />
                    </div>
                  </div><br><br>
                  <hr>
                </div>




              </div>
            </div>


            <div class="panel-footer">
              <button class="btn btn-default" ng-click="submitSurvey()">Submit</button>
            </div>

          </div>



        </form>
      </div>

    </div>


  </div>



  <!-- END PAGE CONTENT WRAPPER -->
</div>

<!-- END PAGE CONTENT -->
</div>
<!-- END PAGE CONTAINER -->
<!-- MESSAGE BOX-->

<div class="message-box animated fadeIn" class="modal" id="mb-signout">
  <div class="mb-container">
    <div class="mb-middle">
      <div class="mb-title"><span class="fa fa-sign-out"></span> Log <strong>Out</strong> ?</div>
      <div class="mb-content">
        <p>Are you sure you want to log out?</p>
        <p>Press No if youwant to continue work. Press Yes to logout current user.</p>
      </div>
      <div class="mb-footer">
        <div class="pull-right">
          <a href="" class="btn btn-success btn-lg" ng-click="logout()">Yes</a>
          <button class="btn btn-default btn-lg mb-control-close" data-dismiss="modal">No</button>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- END MESSAGE BOX-->

Answer 1

您的提交按钮 代码出现在 ngIf 条件中，因此请检查。