У меня есть простой контроллер, который извлекает некоторые сообщения, используя $ http.get. Затем я показываю его в HTML с помощью ng-repeat. Но по какой-то причине это не работает, если я пытаюсь получить к ним доступ из окна модели. Он всегда печатает первое сообщение.
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>
app.js
var app = angular.module('plunker', []);
var prefix = 'http://jsonplaceholder.typicode.com';
app.controller('MessageController', ['$http', function ($http) {
var $this = this;
$http.get(prefix + '/posts').success(function (response) {
$this.messages = response;
return response;
});
}]);
здесь plucker http://plnkr.co/edit/ZKyZJV9aYD5AU6kmsMTC?p=preview
Проблема в том, что вы используете один и тот же идентификатор для всех модалов id="myModal"
. Таким образом, по мере того, как поиск по html завершится после нахождения первого совпадения, он всегда будет показывать вам тот же модальный.
используйте идентификатор переменной, например, используя $index
из ng-repeat
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">
http://plnkr.co/edit/vXbN1FwH4yjb66rLV5qn?p=preview
Но обращение к чему-либо с помощью #id - очень плохой шаблон в угловых