Question

我现在已经用Bootstrap Modals得到了这个奇怪的错误几天，并且似乎无法在线找到任何答案。我对此有任何帮助表示感谢。

我的网站使用AngularJS + Bootstrap。我现在正在处理的特定部分有两个按钮，它们会显示一个模态，并在它们下面有一个网格，向用户显示一堆信息。奇怪的是，允许用户在网格上创建条目的按钮将显示一个表单，但不允许他们编辑前两个字段。第二个按钮，允许用户编辑网格上的条目，其格式与创建按钮相同，但工作正常。这也仅在页面刷新时发生，并在用户单击编辑按钮以显示该模式后解析，然后关闭该模式。之后，创建模式将正常工作。以下是该网站的这些部分的代码：

模态按钮：

<div class="row-fluid" ng-init="getAllSources()">
  <!-- Create Source Modal Button -->
  <button class="btn btn-success" data-toggle="modal" data-target="#createSource" ng-click="initCreateSource()">+ Create Source</button>
  <!-- Edit Source Modal Button -->
  <button class="btn btn-primary pull-right" data-toggle="modal" data-target="#editSource">Edit Source</button>   

  <!-- Sources Grid -->
  <div ng-show="visible.grid == true" class="edus-admin-manage-grid" style="margin-left:0;" ng-grid="sourceGridOptions"></div>
</div>

模态：

<div class="modal fade" id="createSource" tabindex="-1" role="dialog" aria-labelledby="createSourceLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="createSourceModal">Create Source</h4>
      </div>
      <div class="modal-body" ng-include="'source-create.html'"></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" ng-click="getAllSources()" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-success" ng-click="getAllSources()" data-dismiss="modal">Save</button>
      </div>
    </div>
  </div>
</div>

（编辑源模态看起来完全与创建源模式相同，但ng-include中的其他链接除外，还有一些标签在这里和那里）

以下是代码中没有工作的代码部分＆＃39;在页面刷新：

<form name="form" novalidate>
  <div class="row-fluid">
    <label for="inputID">* Source Id</label>
    <label for="inputName">* Source Name</label>
  </div>
  <div class="row-fluid">
    <input type="text" class="span4" id="inputId" placeholder="Title" ng-model="createSource.createId" required>
    <input type="text" class="span8" id="inputName" placeholder="Source Name" ng-model="createSource.createName" required>
  </div>
  <div class="edus-admin-manage-label-rows row-fluid ">
    <label class="edus-admin-manage-label span4"  for="inputId">* Activity Name</label>
    <label class="edus-admin-manage-label span4" for="inputName">* Activity Label</label>
  </div>
  <div class="row-fluid form-inline">
    <select class="span4" ng-model="activityType.activity" ng-options="value.name for value in multipleActivityTypes" data-style="btn" bs-select></select>
    <select class="span4" ng-model="activityType.label" ng-options="value for value in activityLabels" data-style = "btn" bs-select></select>
    <input class="btn btn-default span4" type="submit" ng-click="activityTypeSubmit()" value="Add Activity" data-style="btn"/>
  </div>
  ...
</form>

＆＃39; ...＆＃39;之后的其他所有内容在代码的第三个片段中工作 - 我只是不能从下拉菜单中选择任何选项，或输入任何内容来源ID /名称字段。我认为我在创建源按钮中的ngClick可能会出现问题，所以我删除它以查看表单是否可编辑 - 没有运气。非常感谢任何帮助！

更新

最初，我的HTML组织如下：

<div>
  <!-- Modal Buttons -->
</div>

<!-- Modals -->

当我将我的模态移回包含按钮的div时，如下所示：

<div>
  <!-- Modal Buttons -->
  <!-- Modals -->
</div>

一切按预期工作。这似乎是某种范围问题，我认为这不会引起HTML问题 - 任何人都可以对这类问题有所了解吗？

Answer 1

当你疯狂地粘贴它时，很难确定问题。请使用plunker来解决这些问题。在Plnkr中查看此演示考虑您的数据结构就像

$scope.activityType = {
    'activityType.activity': {}
};
$scope.multipleActivityTypes = [
 {
   'name': 'asd',
   'val': 123
 },
 { 
  'name': 'qwe',
  'val': 234
 }
];

P.S。我应该评论这个，但不是应该的。很遗憾

用户无法将信息输入到引导模式窗体中

1 个答案: