|
|
@@ -0,0 +1,81 @@
|
|
|
+<!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>
|
