AngularJS
Aus wiki
Version vom 29. August 2014, 13:48 Uhr von Christofbuechi (Diskussion | Beiträge) (→Small Angular JS App)
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);
};
});
