如何在模态体内显示输入数据?

时间:2018-02-12 13:28:33

标签: javascript jquery angular twitter-bootstrap

我在某些按钮单击中有几个元素和模态的表我想调用模态(带有表元素数据) 这是我的代码:

<div class="container" >
      <h1>Bootstrap modal dialogs with angular</h1>
      <p>Click the edit button to edit the person's name in a modal dialog.</p>

      <table class="table table-hover"" ng-repeat="person in persons" >
        <tr>
          <th>Name</th>
          <th>Actions</th>
        </tr>
        <tr><td><input style="width:100px;" type="text" id="id"  ng-model="person.id" /></td>
     <td><button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#exampleModal" id="but">Details</button></td></tr>
      </table>

    </div>

    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

我想接受这样的回复,没有DaTatables: https://datatables.net/extensions/responsive/examples/display-types/modal.html

我在我的脚本中添加了类似的逻辑,但它对我不起作用:

$(".btn[data-target='#myModal']").click(function() {
 $("#exampleModal").html('Edit auction with id '+ $(e.relatedTarget).data('id'));
     $("#exampleModal").html($(e.relatedTarget).data('title'));
    $('#exampleModal ').find('input#input-id').val($(e.relatedTarget).data('title'))
});

我应该改变什么来获得适当的结果?

1 个答案:

答案 0 :(得分:0)

$(".btn[data-target='#exampleModal']").click(function() {
     $("#exampleModal").html($(e.currentTarget).data('title'));
    $('#exampleModal ').find('input#input-id').val($(e.currentTarget).data('title'))
});