Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
  <meta charset="utf-8">
  <title>Controllers for AngularJS CH/open workshop</title>
</head>
<body ng-app="tasksApp" ng-controller="TaskController">
<div>
  <input type="text" ng-model="todo"/>
</div>
<p>Hafta {{todo}}</p>
​
<button ng-click="addTask()">Add to tasklist</button>
​
<p>Till now I have to:</p>
<ul>
  <li ng-repeat="task in tasks">{{task}}<button ng-click="removeTask($$index)">x</button></li>
</ul>
<div ng-controller="FooterController">
TasksApp v{{version}}
</div>
</body>
</html>
 
​
 
angular.module('footer', [])
  .controller('FooterController', function ($scope, version) {
    $scope.version = version
  });
​
​
angular.module('tasksApp', ['footer'])
  .value('version', '0.0.0-pre-alpha')
  .factory('tasksService', function () {
    var tasks = ['task1', 'task2'];
    return {
      all: function () {
        return tasks;
      },
      removeTask: function (index) {
        tasks.splice(index, 1);
      }
    }
  })
  .controller('TaskController', function ($scope, tasksService) {
    $scope.tasks = tasksService.all();
​
    $scope.removeTask= function (index) {
      tasksService.removeTask(index)
    };
  });
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
valotaspro
0viewers