AngularJS: Unterschied zwischen den Versionen
Aus wiki
(→Small Angular JS App) |
(→Small Angular JS App) |
||
| Zeile 1: | Zeile 1: | ||
== Small Angular JS App == | == Small Angular JS App == | ||
| + | index.html | ||
<pre><!doctype html> | <pre><!doctype html> | ||
<html class="no-js"> | <html class="no-js"> | ||
| Zeile 54: | Zeile 55: | ||
</body> | </body> | ||
</html> | </html> | ||
| + | </pre> | ||
| + | |||
| + | main.js | ||
| + | <pre> | ||
| + | var app = angular.module('taskmanApp', ['ngStorage']); | ||
| + | |||
| + | app.filter('myJsonFilter', function () { | ||
| + | return function (inputArray) { | ||
| + | var outputArray = []; | ||
| + | |||
| + | angular.forEach(inputArray, function (item) { | ||
| + | var temp = JSON.parse(item); | ||
| + | outputArray.push(temp); | ||
| + | }); | ||
| + | |||
| + | return outputArray; | ||
| + | }; | ||
| + | }); | ||
| + | |||
| + | |||
| + | app.controller('taskController', function ($scope, $localStorage) { | ||
| + | |||
| + | // $scope.$storage = $localStorage; | ||
| + | $scope.$storage = $localStorage.$default({ | ||
| + | tasks: new Array() | ||
| + | }); | ||
| + | |||
| + | $scope.$storage.tasks = []; | ||
| + | |||
| + | $scope.addTask = function () { | ||
| + | var pushMe = angular.toJson({ | ||
| + | name: $scope.$storage.task.name, | ||
| + | prio: $scope.$storage.task.prio | ||
| + | }); | ||
| + | |||
| + | $scope.$storage.tasks.push(pushMe); | ||
| + | }; | ||
| + | }); | ||
</pre> | </pre> | ||
Version vom 29. August 2014, 13:48 Uhr
Small Angular JS App
index.html
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>TaskMan - AngularJS TaskManager with local Storage</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="styles/main.css">
<script src="scripts/angular.js"></script>
<script src="scripts/ngStorage.js"></script>
<script src="scripts/controllers/main.js"></script>
</head>
<body ng-app="taskmanApp">
<!-- Add your site or application content here -->
<div class="container">
<div class="header">
<h3>taskman</h3>
</div>
<div class="content" ng-controller="taskController">
<div>
Create a new Task:
<form ng-submit="addTask()">
<input placeholder="insert task" ng-model="$storage.task.name">
<select ng-model="$storage.task.prio">
<option value="high">High Prio</option>
<option value="middle">Middle Prio</option>
</select>
<input type="submit" class="btn-primary" value="Insert">
</form>
</div>
<div>
<span> Anzahl Einträge: {{$storage.tasks.length}}</span>
<ul>
<li ng-repeat="acttask in $storage.tasks | myJsonFilter">
<p>Text: {{acttask.name}}<br>Priorität: {{acttask.prio}}</p>
</li>
</ul>
</div>
</div>
<div class="footer">
<p><span class="glyphicon glyphicon-heart">Greets</span> from the TaskMan team</p>
</div>
</div>
</body>
</html>
main.js
var app = angular.module('taskmanApp', ['ngStorage']);
app.filter('myJsonFilter', function () {
return function (inputArray) {
var outputArray = [];
angular.forEach(inputArray, function (item) {
var temp = JSON.parse(item);
outputArray.push(temp);
});
return outputArray;
};
});
app.controller('taskController', function ($scope, $localStorage) {
// $scope.$storage = $localStorage;
$scope.$storage = $localStorage.$default({
tasks: new Array()
});
$scope.$storage.tasks = [];
$scope.addTask = function () {
var pushMe = angular.toJson({
name: $scope.$storage.task.name,
prio: $scope.$storage.task.prio
});
$scope.$storage.tasks.push(pushMe);
};
});
