Javascript 模型窗口内的AngularJS范围

我有一个简单的控制器，它使用$http.get获取一些消息。然后我使用ng repeat在HTML中显示它。但由于某种原因，如果我试图从模型窗口访问它们，它就不起作用。它总是打印第一条消息

index.html

 <div ng-controller="MessageController as ctrl">
    <ul class="list-group" ng-repeat="message in ctrl.messages">
        <li class="list-group-item">
            {{message.title}}
            <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">
               Edit
            </button>

            <div class="modal fade" id="myModal" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">

                        <div class="modal-body">
                            {{message.title}}
                            <label>Title:</label><input ng-model="message.title"/>
                        </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>
            </div>
        </li>
    </ul>

</div>

---

这是采摘器

问题是您对所有模态使用相同的id

id=“myModal”

。因此，由于html上的搜索将在找到第一个巧合后完成，因此它将始终显示相同的模式

使用变量id，例如，使用

ng repeat

中的

$index

id="myModal_{{$index}}" 

在两个div（id和data target）上执行此操作，它应该可以正常工作。

此操作：

<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal{{$index}}">
...
<div class="modal fade" id="myModal{{$index}}" aria-labelledby="myModalLabel">

...

---

但是在angular中，用#id来处理任何事情都是非常糟糕的模式

去掉bootstrap.js并使用angular ui引导

<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal{{$index}}">
...
<div class="modal fade" id="myModal{{$index}}" aria-labelledby="myModalLabel">