AgularJSBooks/app/views/books-details.template.html

<h1 class='page-header'>Book Details</h1>
<div class="book-details" ng-if='!isEditeMode'>
    <button class="btn-primary"  ng-click="edite()"><i class="glyphicon glyphicon-pencil"></i></button>
    <h3>{{details.title}}</h3>
    <h3>Author: {{getAuthorsById(details.author_id)}}</h3>
    <span>({{details.date}})</span>
    <span><i class="glyphicon glyphicon-heart">{{details.rate}}</i>${{details.cost}}</span>
    <img ng-src='{{details.image || "./app/img/noBook.png"}}' class="imgDetail">
    <p>{{details.intro}}</p>
</div>
<div class="edite-detail" ng-if='isEditeMode'>
        <button class="btn-success"  ng-click="save()"><i class="glyphicon glyphicon-pencil"></i></button>
        <button class="btn-danger"  ng-click="noEdite()"><i class="glyphicon glyphicon-remove"></i></button>
        <div class="form-group">
            <label for="title"></label>
            <input type="text" class="form-control" ng-model='details.title' id="title">
        </div>
        <div class="form-group">
            <label for="date"></label>
            <input type="date" ng-model='details.date' class="form-control" id="date">
        </div>
        <div class="form-group">
            <label for="text"></label>
            <textarea type="text" ng-model="details.intro"  class="form-control" id='text' rows="10" ></textarea>
        </div>
        <div class="form-group">
                <label for="text"></label>
                <select ng-model="details.author_id" ng-options="author.id as author.name for author in authors">

                </select>
        </div>
        
</div>