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
  • …
 
<html ng-app="myApp" ng-controller="toDoCtrl">
  <body>
    
    <h1>{{appTitle}}</h1>
    <input type="text" placeholder="Type something to do." ng-model="toDoText">
    <button ng-click="addToDo()">Add</button>
    <button class="block" ng:click="del()">Delete</button>
    <button class="block" ng_click="deleteAll()">Delete All</button>
    <ul ng-repeat="toDo in toDos">
      <li>
        <input type="checkbox" ng-model="toDo.done">
        <span ng-class="'done-'+toDo.done">
          {{toDo.text}}
        </span>
      </li>
    </ul>
    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
    
  </body>
</html>
 
.done-true {
  opacity: .5;
}
​
.block {
  display: block;
}
 
​
var app = angular.module('myApp', []);
​
app.controller('toDoCtrl', function($scope) {
  $scope.appTitle = 'ToDo List App';
  $scope.toDoText = '';
  
  $scope.toDos = [
    {text: 'Learn Angular.', done:true},
    {text: 'Build an Angular app.', done:false}
  ];
  
  $scope.addToDo = function() {
    if ($scope.toDoText) {
      $scope.toDos.push({
        text: $scope.toDoText,
        done: false
      });
      $scope.toDoText = '';
    }
  };
  
  $scope.del = function() {
    for (var i=0; i<$scope.toDos.length; ++i) {
      if ($scope.toDos[i].done) {
        $scope.toDos.splice(i, 1);
      }
    }
  };
  $scope.deleteAll = function() {
    $scope.toDos = [];
  };
});
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers