Created
February 16, 2016 16:01
-
-
Save krawaller/38569bff3fcd597c1dd5 to your computer and use it in GitHub Desktop.
Weird
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| angular.module('myApp',[]) | |
| .factory('tags',function(){ | |
| var tags = ['urgent','blocked','boring','hard'], | |
| callbacks = []; | |
| return { | |
| addTag: function(t){ | |
| tags.push(t); | |
| callbacks.forEach(function(cb){ | |
| cb(tags) | |
| }); | |
| }, | |
| registerInterest: function(cb){ | |
| callbacks.push(cb); | |
| cb(tags); | |
| } | |
| } | |
| }) | |
| .controller('tagsController',function($scope,tags){ | |
| $scope.createNewTag = function(){ | |
| tags.addTag($scope.newTag) | |
| $scope.newTag = "" | |
| } | |
| var mylocalcallback = function(taglist){ | |
| $scope.taglist = taglist; | |
| } | |
| tags.registerInterest(mylocalcallback); | |
| }) | |
| .controller('issueController',function($scope,tags){ | |
| $scope.issues = [{description:"dishes",id:1,tags:{}},{description:"garbage",id:2,tags:{}}]; | |
| $scope.addNewIssue = function(){ | |
| $scope.issues.push({description:$scope.newIssue,id:$scope.issues.length+1,tags:{}}); | |
| $scope.newIssue = undefined; | |
| } | |
| tags.registerInterest(function(tags){ | |
| $scope.availableTags = tags; | |
| }); | |
| $scope.tagToAdd = $scope.availableTags[0] | |
| $scope.addTagToSelectedIssues = function(){ | |
| $scope.issues.forEach(function(i){ | |
| if (i.selected){ | |
| i.tags[$scope.tagToAdd] = 1; | |
| } | |
| }); | |
| } | |
| $scope.removeTagFromIssue = function(i,tname){ | |
| delete i.tags[tname]; | |
| } | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="../angular.js"></script> | |
| <script src="../jquery.js"></script> | |
| <script src="../bootstrap.js"></script> | |
| <link rel="stylesheet" href="../bootstrap.css"></link> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>TEST</title> | |
| </head> | |
| <style> | |
| .done { | |
| text-decoration: line-through; | |
| } | |
| </style> | |
| <body> | |
| <div ng-app="myApp" class="container"> | |
| <h4>Tags</h4> | |
| <div ng-controller="tagsController"> | |
| <div> | |
| <span ng-repeat="t in taglist" class="label label-success">{{t}}</span> | |
| </div> | |
| <input ng-model="newTag" /> | |
| <button ng-click="createNewTag()">Create new tag</button> | |
| </div> | |
| <hr/> | |
| <div ng-controller="issueController"> | |
| <h4>Issues</h4> | |
| <div ng-repeat="issue in issues"> | |
| <div> | |
| <input type="checkbox" ng-model="issue.selected"> | |
| <span ng-click="issue.done = !issue.done" ng-class="{done:issue.done}"> | |
| {{issue.description}} | |
| </span> | |
| <span ng-repeat="(tagname,set) in issue.tags"> | |
| <span class="label label-success" ng-click="removeTagFromIssue(issue,tagname)">{{tagname}}</span> | |
| </span> | |
| </div> | |
| </div> | |
| <div> | |
| <select ng-model="tagToAdd" ng-options="t for t in availableTags"></select> | |
| <button ng-click="addTagToSelectedIssues()">Add {{tagToAdd}} to selected issues</button> | |
| </div> | |
| <div> | |
| <input ng-model="newIssue"/> <button ng-click="addNewIssue()">Add new issue</button> | |
| </div> | |
| <hr/> | |
| <pre ng-bind="issues | json"></pre> | |
| </div> | |
| <script src="./myapp.js"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment