javascript - 使用 AngularJS 中 Controller 的值预填充 Bootstrap 模式输入

Question

我想用 ng-model 数据在 Bootstrap 模式中预填充我的表单，所以我尝试了一些方法，但没有成功。这是plunker用我的代码。我尝试添加解析函数，并将 $scope 对象返回到我的 modalService，但它没有按我的预期工作。有人可以帮助我吗？谢谢:)

Answer 1

首先，您的 plunker 中没有模型，因此不会显示任何内容。

要在模型内显示数据，请遵循与在其他位置显示数据相同的过程。

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
    <p>One fine body&hellip;</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div>

然后，您将在模型结构后填充添加 {{object.name}} 以显示数据。

例如

<h4 class="modal-title">{{title}}</h4>

如果您想在模态中使用表单，那么 ng-model 适合您，您可以像这样使用它:

<form name="testForm" ng-controller="ExampleController">
  <input ng-model="name" name="anim" class="my-input"
         aria-describedby="inputDescription" />
</form>

这将以两种方式将模型中的名称属性绑定(bind)到输入，这反过来又会预先填充输入字段。您可以阅读有关 ng-model 的更多信息 here