2017-07-11 21:49:00 +02:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html>
|
|
|
|
|
|
|
2017-07-15 00:07:05 +02:00
|
|
|
|
<head>
|
|
|
|
|
|
<title>Angular Tests</title>
|
|
|
|
|
|
</head>
|
2017-07-11 21:49:00 +02:00
|
|
|
|
|
2017-07-15 00:07:05 +02:00
|
|
|
|
<body ng-app="MyApp" ng-controller="Demo">
|
|
|
|
|
|
|
|
|
|
|
|
<h1>Scoping</h1>
|
|
|
|
|
|
|
|
|
|
|
|
<div>
|
2017-07-11 21:49:00 +02:00
|
|
|
|
<div style="background:#eee">
|
|
|
|
|
|
<input ng-model="string1"><br>
|
|
|
|
|
|
<input ng-model="string2">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div sub-scope="string1">
|
|
|
|
|
|
<input style="color: blue" ng-model="string">
|
|
|
|
|
|
Scope {{ ok }} (Scope ok)
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div sub-scope="string2"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
2017-08-15 14:51:23 +02:00
|
|
|
|
<h1>Editor with Array</h1>
|
2017-07-15 00:07:05 +02:00
|
|
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
|
|
|
|
|
|
|
<button ng-click="log(demodata)">Print</button>
|
|
|
|
|
|
|
|
|
|
|
|
<table edit="demodata" callback="log">
|
|
|
|
|
|
<thead>
|
|
|
|
|
|
<th><button ng-click="editor.key = demodata.length">➕ New</button></th>
|
|
|
|
|
|
</thead>
|
|
|
|
|
|
<tbody>
|
|
|
|
|
|
<tr ng-repeat-start="row in demodata">
|
|
|
|
|
|
<td><button ng-click="editor.key = $index">✏</button></td>
|
|
|
|
|
|
<td><button ng-click="remove(editor, demodata, $index)">🚫</button></td>
|
|
|
|
|
|
<td colspan="2">{{ row.Name }}</td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
<tr ng-repeat-end ng-if="editor.key === $index || $last && editor.key === $index + 1">
|
|
|
|
|
|
<td><button ng-click="editor.save()">✔️</button></td>
|
|
|
|
|
|
<td><button ng-click="editor.revert()">❌</button></td>
|
|
|
|
|
|
<td><input ng-model="item.Name"></td>
|
|
|
|
|
|
<td><input ng-model="item.Number"></td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
</tbody>
|
2017-08-15 14:51:23 +02:00
|
|
|
|
</table>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<h1>Editor with Object</h1>
|
|
|
|
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
|
|
|
|
|
|
|
<button ng-click="log(demoobject)">Print</button>
|
|
|
|
|
|
|
|
|
|
|
|
<table edit="demoobject" callback="log">
|
|
|
|
|
|
<thead>
|
|
|
|
|
|
<th><button ng-click="demoobject.item = {}; editor.key = 'item'">➕ New</button></th>
|
|
|
|
|
|
</thead>
|
|
|
|
|
|
<tbody>
|
|
|
|
|
|
<tr ng-repeat-start="(o, row) in demoobject">
|
|
|
|
|
|
<td><button ng-click="editor.key = o">✏</button></td>
|
|
|
|
|
|
<td><button ng-click="remove(editor, demoobject, o)">🚫</button></td>
|
|
|
|
|
|
<td ng-bind="o"></td>
|
|
|
|
|
|
<td colspan="2" ng-bind="row.Name"></td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
<tr ng-repeat-end ng-if="editor.key === o">
|
|
|
|
|
|
<td><button ng-click="editor.save()">✔️</button></td>
|
|
|
|
|
|
<td><button ng-click="editor.revert()">❌</button></td>
|
|
|
|
|
|
<td><input ng-model="item._key"></td>
|
|
|
|
|
|
<td><input ng-model="item.Name"></td>
|
|
|
|
|
|
<td><input ng-model="item.Number"></td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
</tbody>
|
2017-07-15 00:07:05 +02:00
|
|
|
|
</table>
|
2017-07-15 18:19:30 +02:00
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<h1>Pagination</h1>
|
|
|
|
|
|
|
|
|
|
|
|
<div pagination>
|
|
|
|
|
|
<style>
|
|
|
|
|
|
.pagination button { width: 40px; }
|
|
|
|
|
|
.pagination .disabled { color: gray; }
|
|
|
|
|
|
.pagination .current { font-weight: bold; color: green; }
|
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
|
|
<button ng-click="log(pages)">Print</button>
|
|
|
|
|
|
|
|
|
|
|
|
<table>
|
|
|
|
|
|
<thead>
|
|
|
|
|
|
<th>Name</th>
|
|
|
|
|
|
<th>Number</th>
|
|
|
|
|
|
</thead>
|
|
|
|
|
|
<tbody>
|
|
|
|
|
|
<tr ng-repeat="row in moredata | paginate: pagination">
|
|
|
|
|
|
<td>{{ row.Name }}</td>
|
|
|
|
|
|
<td>{{ row.Number }}</td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
</tbody>
|
|
|
|
|
|
</table>
|
2017-07-15 00:07:05 +02:00
|
|
|
|
|
2017-07-15 18:19:30 +02:00
|
|
|
|
<span class="pagination" ng-repeat="p in pages track by $index">
|
|
|
|
|
|
<button ng-class="{disabled: p === 'hide', current: $index === pages.current}" ng-click="pagination.page = p">{{ p }}</button>
|
|
|
|
|
|
</span>
|
2017-07-15 00:07:05 +02:00
|
|
|
|
</div>
|
|
|
|
|
|
|
2017-07-11 21:49:00 +02:00
|
|
|
|
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.12/angular.min.js"></script>
|
2017-07-15 00:07:05 +02:00
|
|
|
|
<script src="assets/js/MyApp.js"></script>
|
2017-07-11 21:49:00 +02:00
|
|
|
|
<script src="assets/js/SubScopeDirective.js"></script>
|
2017-07-15 00:07:05 +02:00
|
|
|
|
<script src="assets/js/EditorDirective.js"></script>
|
2017-07-15 18:19:30 +02:00
|
|
|
|
<script src="assets/js/PaginationDirective.js"></script>
|
2017-07-11 21:49:00 +02:00
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
|
|
</html>
|
