用户无法将信息输入到引导模式表单中

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 中的链接不同，以及此处和此处的一些标签）

这是在页面刷新时不起作用的代码部分：

<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>

代码的第三个 sn-p 中“...”之后的所有其他内容都有效 - 我无法从下拉菜单中选择任何选项，也无法为 Source Id/Name 字段输入任何内容。我认为我在创建源按钮中显示模式的 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
 }
];

附言我应该对此发表评论，但还不够分。很抱歉