CODEWITHSUNDEEP
javascriptangularjs
ka4tik
ka4tik

Reputation: 77

AngularJS scope inside model window

I have a simple controller which fetches some messages using $http.get. Then I am displaying it in HTML using ng-repeat. But for some reason it doesn't work if I try to access them from a model window. It's always prints first message.

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;
   });
}]);

here's the plucker http://plnkr.co/edit/ZKyZJV9aYD5AU6kmsMTC?p=preview

Upvotes: 0

Views: 40

Answers (2)

Petr Averyanov
Petr Averyanov

Reputation: 9476

this works:

<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

But addressing anything by #id is very bad pattern in angular

Upvotes: 1

Gonzalo.-
Gonzalo.-

Reputation: 12672

The problem is that you're using the same id for all the modals id="myModal". Thus, as the search on html will finish after finding the first coincidence, it will always show you the same modal.

use a variable id, for instance, using the $index from ng-repeat

id="myModal_{{$index}}"

Do this on both divs (the id and data-target) the and it should work fine.

Upvotes: 1

Related Questions