Usare finestre modali in AngularJS

Oggi vediamo come usare finestre modali con AngularJS.

In pratica, cliccando su un tasto, vedremo il dettaglio di un record nella finestra modale.

Partiamo quindi dalla tabella che espone i dati:

                    <table class="table table-bordered table-condensed table-striped">
                        <thead>
                            <tr>
                                <th>Titolo</th>
                                <th>Autore</th>
                                <th>Editore</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="book in books| filter:searchText">
                                <td>{{book.title}}</td>
                                <td>{{book.author}}</td>
                                <td>{{book.editor}}</td>
                                <td>
                                    <button type="button" class="btn btn-sm btn-primary"
                                            ng-click="open(book)">Dettaglio</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>

Su come prendere i dati potete vedere questo articolo (anche se non usiamo una table in quel caso, ma il concetto è uguale).

Questo il Javascript, che espone il metodo open, richiamato tramite l'evento ng-click:

var app = angular.module('listBooksApp', ["ui.bootstrap"]);

var BooksCtrl = function ($scope, $http, $modal) {

    $http.get('books.php').
            success(function (data, status, headers, config) {
                $scope.books = data;
            }).
            error(function (data, status, headers, config) {
                alert('Impossibile reperire la lista!');
            });

    $scope.open = function (elemento) {
        $modal.open({
            templateUrl: 'modal.html',
            controller: ModalInstanceCtrl,
            resolve: {
                items: function () {
                    return elemento;
                }
            }
        });
    };
};

var ModalInstanceCtrl = function ($scope, $modalInstance, items) {

    $scope.items = items;

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
};

Non ci rimane che creare il file con l'HTML della finestra modale (modal.html con molta fantasia):

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" ng-click="cancel()">&times;</button>
            <h4 class="modal-title">{{items.title}}</h4>
        </div>
        <div class="modal-body">
            <span>Autore: {{items.author}}</span><br>
            <span>Editore: {{items.editor}}</span><br>
            <span>Prezzo: {{items.price}}</span><br>
            <span>ISBN: {{items.isbn}}</span><br>
            <span>Note: {{items.note}}</span><br>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" ng-click="cancel()">Close</button>
        </div>
    </div>
</div>

Ricordo che i dati sono in formato JSON, e noi glieli passiamo nell'evento open.

Enjoy!