okriuchkov
/
angular


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
							<!DOCTYPE html>
<html lang="en" ng-app="fea5">
<head>
	<meta charset="UTF-8">
	<title>ANGULAr</title>
	<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
	<div class="container" ng-controller="Main">
		<div class="page-header">
			<h1>Hello</h1>
		</div>
		<h2 ng-show="x>y">Go Home 1</h2>
		<h2 ng-hide="x>y">Go Home 2</h2>
		<h3 ng-if="true">asdfasdad</h3>

		<div ng-switch="color">
			<div ng-switch-when="red">aaaa</div>
			<div ng-switch-when="blue">aaaa</div>
			<div ng-switch-when="green">aaaa</div>
			<div ng-switch-when="black">aaaa</div>
			<div ng-switch-default="purple">aaaa</div>
		</div>

		<input type="number" ng-model="value"> + 1 = {{1+value}}

		<input type="number" ng-model="x"><button ng-click="sum()">+</button><input type="number" ng-model="y"> {{result}}

		<input type="text" ng-model="item">
		<button class="btn btn-primary" ng-click="addItem()">+</button>
		<ul>
			<li ng-repeat="item in data track by $index">{{item}} <button class="btn btn-danger" ng-click="deleteItem($index)">x</button></li>
		</ul>

		<div>
			<div class="col-md-6">
				<div>Shape Maker</div>
				<span>Width</span><input type="number" ng-model="style.width""><br />
				<span>Height</span><input type="number" ng-model="style.height" ><br />
				<span>Background</span><input type="text" ng-model="style.background" >
			</div>
			<div class="col-md-6">
				<div ng-style="{width: style.width+'px', height: style.height+'px', background: style.background}"></div>
			</div>
		</div>
	</div>

	<div ng-controller="BooksList">

		<div class="page-header"><h1>Books List</h1></div>
		<div>
			<input ng-model="searchString" placeholder="sortFieldlter">
		</div>
		<table class="table table-striped">
			<thead>
				<tr>
					<th ng-click="sortBy('title')"><i class="glyphicon" ng-class="{'glyphicon-chevron-up': sortField === 'title', 'glyphicon-chevron-down': sortField === '-title'}">TITLE</th>
					<th ng-click="sortBy('author')"><i class="glyphicon" ng-class="{'glyphicon-chevron-up': sortField === 'author', 'glyphicon-chevron-down': sortField === '-author'}"></i>Author</th>
					<th ng-click="sortBy('date')">Date</th>
					<th ng-click="sortBy('cost')">Cost</th>
					<th ng-click="sortBy('rate')">Rate</th>
				</tr>
			</thead>
			<tr ng-repeat="item in books | orderBy: sortField |filter: searchString track by $index ">
				<td>{{item.title}}</td>
				<td>{{item.author | uppercase}}</td>
				<td>{{item.date | date: 'longDate'}}</td>
				<td>{{item.cost | currency}}</td>
				<td>{{item.rate | number : 1}}</td>
				<td><button class="btn btn-danger" ng-click="deleteBook(item.id)">x</button></td>
			</tr>
		</table>
		<div class="text-center" ng-if="!books.length">No data</div>
	</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>