AngularJS Example:

by phsiao2000

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div ng-app>
  <h2>Todo</h2>
  <div ng-controller="TodoCtrl">
      <span>{{remaining()}} of {{todos.length}} remaining <strong>{{type}}</strong> todos</span>
    [ <a href="" ng-click="archive()">archive</a> ]
    <table class="table table-striped table-bordered">
        <tbody>
           <tr ng-repeat="todo in todos">
               <td>
                   <span class="done-text-{{todo.done}}">
                       <strong>{{todoDone(todo)}}</strong>
                   </span>
                 <input type="checkbox" ng-model="todo.done">
                 <span class="done-{{todo.done}}">{{todo.text}}</span>
              </td>
          </tr>
        </tbody>
    </table>
    <form class="well form-horizontal" ng-submit="addTodo()">
        <fieldset>
        <div class="control-group">
            <label class="control-label">Your Purchase Options</label>
            <div class="controls">
              <label class="radio" ng-repeat="option in options">
                <input type="radio" ng-model="selected.thing" value="{{$index}}">
                {{option.text}}
              </label>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">Your to do</label>
            <div class="controls">
                <input type="text" class="input" ng-model="todoText"  placeholder="add new todo here">
            </div>
        </div>
        <div class="form-actions">                    
            <button class="btn btn-primary" type="submit">add {{options[selected.thing].text}}</button>
         </div>
      </fieldset>
    </form>
  </div>
</div>

CSS

.done-true {
  text-decoration: line-through;
  color: grey;
}

.done-text-true {
    font-size: 9px;
    color: green;
}

.done-text-false {
    font-size: 9px;
    color: darkred;
}

body {
    margin: 20px;
}

JavaScript

function TodoCtrl($scope) {
    $scope.options = [
        {
        text: 'Get the thing',
        id: 1},
    {
        text: 'Buy the thing',
        id: 2},
    {
        text: 'Order the thing',
        id: 3}

    ];
    $scope.selected = {thing:2};

    $scope.todoDone = function(t) {
        return t.done ? "done" : "to do";
    };
    $scope.type = "superb";
    $scope.todos = [
        {
        text: 'learn angular',
        done: true},
    {
        text: 'build an angular app',
        done: false}];

    $scope.addTodo = function() {
        $scope.todos.push({
            text: $scope.options[$scope.selected.thing].text + ":" + $scope.todoText,
            done: false
        });
        $scope.todoText = '';
    };

    $scope.remaining = function() {
        var count = 0;
        angular.forEach($scope.todos, function(todo) {
            count += todo.done ? 0 : 1;
        });
        return count;
    };

    $scope.archive = function() {
        var oldTodos = $scope.todos;
        $scope.todos = [];
        angular.forEach(oldTodos, function(todo) {
            if (!todo.done) $scope.todos.push(todo);
        });
    };
}