angular_js_example-8.x-1.x-dev/templates/angularjs-form.html.twig

{#
/**
 * @file
 * Theme override for a breadcrumb trail.
 *
 * Available variables:
 * - breadcrumb: Breadcrumb trail items.
 */
#}

<div ng-app="myapp" ng-controller="bookViewCtrl">
  <table>
    <tr>
      <th colspan=2>Add a new book</th>
    </tr>
    <tr>
      <td>
        <label for="book-name">Book name:</label></td>
      <td><input type="text" name="book-name" ng-model="bookData.name" id="book-name" /></td>
    </tr>
    <tr>
      <td><label for="book-price">Book price:</label></td>
      <td><input type="text" name="book-price" ng-model="bookData.price" id="book-price" /></td>
    </tr>
    <tr>
      <td><label for="author-id">Author id:</label></td>
      <td><input type="text" name="author-id" ng-model="bookData.authorId" id="author-id" /></td>
      <td><input type="hidden" name="bid" ng-model="bookData.bid"
                 id="bid" /></td>
    </tr>
    <tr>
      <td></td>
      <td>
        <button ng-click="addNewBook(bookData)">Add</button>
      </td>
    </tr>
  </table>
  <div id="bookDiv">
	  <table>
		<thead>
		  <tr>
			<th>Name</th>
			<th>Author</th>
			<th>Price</th>
			<th>Action</th>
		  </tr>
		</thead>
		<tbody>
		  <tr ng-repeat="x in books">
			<td align="center">{{  '{{ x.bookname }}'  }}  </td>
			<td align="center">{{  '{{ x.authorid }}'  }}  </td>
			<td align="center">{{  '{{ x.bookprice }}'  }}  </td>
			<td align="center"> 
			  <button type="button" class="btn btn-default btn-sm" ng-click="editAnyBook(x.bid);">
			  <span class="glyphicon glyphicon-pencil"></span> Edit 
			  </button> 
			  <button type="button" class="btn btn-default btn-sm" ng-click="deleteBooks(x.bid);">
			  <span class="glyphicon glyphicon-remove"></span> Remove 
			  </button>
			</td>
		  </tr>
		</tbody>
	  </table>
	</div>
</div>