115 lines
3 KiB
HTML
115 lines
3 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<title>Angular Tests</title>
|
||
</head>
|
||
|
||
<body ng-app="MyApp" ng-controller="Demo">
|
||
|
||
<h1>Scoping</h1>
|
||
|
||
<div>
|
||
<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>
|
||
|
||
<h1>Editor with Array</h1>
|
||
|
||
<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>
|
||
</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>
|
||
</table>
|
||
</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>
|
||
|
||
<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>
|
||
</div>
|
||
|
||
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.12/angular.min.js"></script>
|
||
<script src="assets/js/MyApp.js"></script>
|
||
<script src="assets/js/SubScopeDirective.js"></script>
|
||
<script src="assets/js/EditorDirective.js"></script>
|
||
<script src="assets/js/PaginationDirective.js"></script>
|
||
</body>
|
||
|
||
</html>
|