AngularJS Example:
by erichbschulz
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.3.0/lodash.min.js"></script>
<div ng-app>
<h2>Tasks</h2>
<div ng-controller="TaskCtrl">
<ul class="unstyled">
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done"> <span class="done-{{todo.done}}">{{todo.text}}</span>
</li>
</ul>
<form ng-submit="addTodo()">
<input type="text" ng-model="todoText" size="30" placeholder="add new todo here">
<input class="btn-primary" type="submit" value="add">
</form>
<h2>elections</h2><pre>{{elections}}<pre>
<h2>tasks</h2><pre>{{tasks}}<pre>
</div>
</div>
CSS
.done-true {
text-decoration: line-through;
color: grey;
}
JavaScript
function TaskCtrl($scope) {
$scope.todos = [{
text: 'learn angular',
done: true
}, {
text: 'build angular',
done: false
}, {
text: 'blah angular',
done: false
}, {
text: 'learn fish',
done: true
}, {
text: 'build fish',
done: false
}, {
text: 'blah fish',
done: false
}, {
text: 'learn bob',
done: true
}, {
text: 'build bob',
done: false
}, {
text: 'blah bob',
done: false
}, ];
$scope.addTodo = function () {
$scope.todos.push({
text: $scope.todoText,
done: false
});
$scope.todoText = '';
};
var firstWord = function (s) {
return s.substr(0, s.indexOf(" "));
}
var lastWord = function (s) {
return s.split(' ').pop();
}
var increment = function (list, key) {
list[key] = list[key] ? list[key]+1 : 1;
}
var parse = function () {
var tasks = $scope.todos;
angular.forEach(tasks, function (task) {
var election = firstWord(task.text);
var task_id = lastWord(task.text);
increment($scope.elections, election);
increment($scope.tasks, task_id);
});
};
$scope.elections = {};
$scope.tasks = {};
$scope.task_index = {};
parse();
}