slavailchenko35
/
angularwork


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
							<!DOCTYPE html>
<html lang="en" ng-app='fea5'>
<head>
	<meta charset="UTF-8">
	<title>AngularJS Silifonov</title>
		<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css"/>
</head>
<body>
	<div class="container" ng-controller="BooksList">
	<h1>Books list</h1>
<input type="text" name="book" ng-model='searchString' placeholder="Search...">
<table class="table table-striped table-hover">
  <thead>
    <tr>
      <th scope="col">Index</th>
      <th scope="col" ng-click="sortBy('title')"><i class="glyphicon" ng-class="{'glyphicon-chevron-up' : sortField === 'title', 'glyphicon-chevron-down' : sortField === '-title'}"></i> Title</th>
      <th scope="col" ng-click="sortBy('author')"><i class="glyphicon" ng-class="{'glyphicon-chevron-up' : sortField === 'author', 'glyphicon-chevron-down' : sortField === '-author'}"></i>Author</th>
      <th scope="col" ng-click="sortBy('date')"><i class="glyphicon" ng-class="{'glyphicon-chevron-up' : sortField === 'date', 'glyphicon-chevron-down' : sortField === '-date'}"></i>Date</th>
      <th scope="col" ng-click="sortBy('cost')"><i class="glyphicon" ng-class="{'glyphicon-chevron-up' : sortField === 'cost', 'glyphicon-chevron-down' : sortField === '-cost'}"></i>Cost</th>
      <th scope="col" ng-click="sortBy('rate')"><i class="glyphicon" ng-class="{'glyphicon-chevron-up' : sortField === 'rate', 'glyphicon-chevron-down' : sortField === '-rate'}"></i>Rate</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
   <tr ng-repeat="book in books | filter: searchString | orderBy: sortField track by $index">
<td>{{$index}}</td>
<td>{{book.title}}</td>
<td>{{book.author | uppercase}}</td>
<td>{{book.date | date : 'longDate'}}</td>
<td>{{book.cost | currency}}</td>
<td>{{book.rate | number : 1}}</td>
<td><button class="btn btn-danger btn-xs" ng-click="deleteBook(book.id)">x</button></td>
    </tr>
  </tbody>
</table>


	</div>


	<script src="node_modules/angular/angular.js"></script>
	<script src="app/app.module.js"></script>
	<script src="app/controllers/main.controller.js"></script>
	<script src="app/controllers/books-list.controller.js"></script>

</body>
</html>