Skip to content

Instantly share code, notes, and snippets.

@krawaller
Created May 10, 2016 14:33
Show Gist options
  • Save krawaller/21453d5a039f0906ad0009a95979360a to your computer and use it in GitHub Desktop.
Save krawaller/21453d5a039f0906ad0009a95979360a to your computer and use it in GitHub Desktop.
fun fun angular stuff :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Exercise 1</title>
<style>
.done {
text-decoration: line-through;
}
.label {
background-color: yellow;
border: 1px solid black;
padding: 2px;
margin-right: 1em;
}
.chosenlabel {
background-color: red;
}
</style>
</head>
<body ng-app="app">
<div ng-controller="labelCtrl">
<h4>Available labels:</h4>
<span class="label" ng-repeat="label in labels">
{{label}}
</span>
<h4>Add new label</h4>
<form ng-submit="addNewLabel()">
<input type="text" ng-model="newLabel"/>
<input type="submit"></input>
</form>
</div>
<hr/>
<div ng-controller="issueCtrl">
<select ng-model="sortBy" ng-options="o.text for o in sortOpts"></select>
<input ng-model="search">
<div ng-repeat="issue in issues | filter : search | orderBy : sortBy.prop : sortBy.backward" ng-class="{done:issue.done}">
{{issue.desc}} ({{issue.age}} days ago)
<input type="checkbox" ng-model="issue.done"/>
<span ng-repeat="l in labels" class="label" ng-class="{chosenlabel:issue.labels[l]}" ng-click="toggleLabelOnIssue(l,issue)">
{{l}}
</span>
</div>
<form ng-submit="addNewIssue()">
<input type="text" ng-model="newIssue"/>
<input type="submit"></input>
<form>
</div>
<script src="../jquery.js"></script>
<script src="../angular.js"></script>
<script>
var app = angular.module("app",[]);
app.factory("labelService",function(){
var labels = ["important","boring","quick"];
var subscribers = [];
return {
subscribeToLabels: function(callback){
subscribers.push(callback);
callback(labels);
},
getLabels: function(){
return angular.copy(labels);
},
addNewLabel: function(str){
labels.push(str);
subscribers.forEach(function(cb){
cb(labels);
});
}
}
});
app.controller("labelCtrl",function($scope,labelService){
labelService.subscribeToLabels(function(l){
$scope.labels = l;
});
$scope.addNewLabel = function(){
labelService.addNewLabel($scope.newLabel);
$scope.newLabel = '';
}
});
app.controller("issueCtrl",function($scope,labelService){
labelService.subscribeToLabels(function(l){
$scope.labels = l;
});
$scope.issues = [
{desc: "Take out trash", age: 23},
{desc: "Do the dishes", age: 5},
{desc: "Vacuum the floors", age: 200},
{desc: "Mow the lawn", age: 890, labels: {boring:true}}
];
$scope.addNewIssue = function(){
$scope.issues.push({
desc: $scope.newIssue, age: 1
});
$scope.newIssue = '';
};
$scope.sortOpts = [
{text:"Desc (ascending", prop:"desc"},
{text:"Desc (descending)", prop:"desc",backward:true},
{text:"Age (ascending)", prop:"age"},
{text:"Age (descending)", prop:"age",backward:true}
];
$scope.sortBy = $scope.sortOpts[0];
$scope.toggleLabelOnIssue = function(label,issue){
issue.labels = issue.labels || {};
issue.labels[label] = !issue.labels[label];
};
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment