Question

我使用bootstrap和angular use对象创建表来显示数据。我想打开弹出窗口，通过单击行来更改对象属性（并使用模态中的角度绑定来处理对象）。所以我的问题是我不了解如何将对象从表传递给模态。

我发现了许多传递值并在飞行中更改html的示例，但在我的情况下，我想使用angular进行绑定并希望将引用传递给对象。

表格样本：

<table class="table table-condensed table-bordered">
            <thead>...</thead>
            <tbody>
            <tr ng-repeat="property in properties" data-toggle="modal" data-id="property" data-target="#editPropertyModal">
                <td>{{property.name}}<td/>
                <td>{{property.value}}<td/>
                <td>...<td/>
            </tr>
            </tbody>
        </table>

因此，通过单击此行，我想打开模态并传递属性对象并使用输入，组合框等控件通过角度绑定值。我的模态样本：

<div class="modal fade" id="editPropertyModal" tabindex="-1" role="dialog" aria-labelledby="editPropertyModalLabel" aria-hidden="true">
<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" id="editPropertyModalLabel">Property details</h4>
        </div>
        <div class="modal-body">
            {{currentProperty.name}} - {{currentProperty.value}}
        </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>
</div>

我尝试通过javascript传递属性：

$(document).on("click", ".open-editPropertyModal", function (e) {
    e.preventDefault();
    var _self = $(this);
    var property = _self.data('id');
    $("#currentProperty").val(property);

    $(_self.attr('href')).modal('show');
});

不能工作。

Answer 1

默认Bootstrap JavaScript与angular不兼容，因为它在AngularJS之外的DOM模型中进行了更改。请考虑使用本机指令进行引导，例如http://mgcrea.github.io/angular-strap/

此外，为了最大限度地简化，在许多情况下，您可以使用类似此插件https://github.com/cgross/angular-prompt的内容。它取决于bootstrap，并为您提供基于promises的简单API。

prompt({
    title: 'Give me a name',
    message: 'What would you like to name it?',
    input: true,
    label: 'Name',
    value: 'Current name',
  }).then(function(name){
    //name contains new value
  });

传递给then的回调将在点击＆＃34; OK＆＃34;之后执行。在弹出窗口中。

Answer 2

您可以使用this来执行此操作。它真的帮助了我。

Bootstrap和angular - 将对象传递给模态

2 个答案: