krawaller/ng.html

## ng.html
<!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>
	<!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>