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 ng-app="toDo" >
<head>
<meta name="description" content="Simple Controller Sharing Model - TODO" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div  ng-controller="Main as MC">
    <div>Feedback: {{MC.feedback}}</div>
    <input ng-model="todo">
    <button ng-click="MC.addToList(todo)">Add to List</button>
    <div ng-repeat="todo in MC.list track by $index">
    <span ng-click="MC.removeItem($index)">{{todo}}</span>
    </div>
  
  <div>Total: {{MC.list.length}}</div>
  </div>
  <hr>
  
<!-- Outside controller below -->  
  <div ng-controller="Outsider as OC">
    Full list as JSON in outside controller:
    <div>{{OC.list | json}}</div>
  </div>
  
</body>
</html>
 
angular.module('toDo',[])
​
.factory('listService', function() {
  var _list = [],
      _maxLength = 5,
      _minLength = 1;
  
  return {
    getList: function() {
      return _list;
    },
    
    add: function(item) {
      if( _list.length >= _maxLength )
        return 'Too many list items';
      _list.push(item);
      return item + ' is added';
    },
    
    remove: function(index) {
      if( _list.length == _minLength )
        return 'You can\'t delete this last item';                
      var item = _list.splice(index, 1)[0];
      return item + ' has been deleted';
    }
  };
})
​
//Controller methods
.controller('Main', function($scope, listService) {
  
  var MC = this;
  
  MC.list = listService.getList();
  
  MC.addToList = function(todo) {
    MC.feedback = listService.add(todo);
    $scope.todo='';
  };
​
  MC.removeItem = function(index) {
    MC.feedback =  listService.remove(index);
  };
​
})
​
.controller('Outsider', function($scope, listService){
  var OC = this;
  OC.list = listService.getList();
})
​
;
Output

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

Dismiss x
public
Bin info
dmitrizpro
0viewers