Live demo: http://jsfiddle.net/bpvjL/6/
HTML:
<div ng-app> <h2>Todo</h2> <div ng-controller="TodoCtrl"> <ul class="unstyled"> <li ng-repeat="todo in todos" > <span class="isactive-{{activeTodo == todo}}" ng-click="changeActive(todo)" > <a href="#" style="none">{{todo.text}}</a> </span> </li> </ul> <form ng-submit="addTodo()"> <input type="text" ng-model="todoText" size="30" placeholder="add new todo here"> <input class="btn-primary" type="submit" value="add"> </form> <ul> <li ng-repeat="step in activeTodo.steps"> {{$index + 1}} {{step.text}} </li> </ul> <form ng-submit="addStep()"> <input type="text" ng-model="stepText" size="30" placeholder="add new step to: {{activeTodo.text}}"> <input class="btn-primary" type="submit" value="add"> </form> </div> </div>
Javascript:
function TodoCtrl($scope) { $scope.todos = [ {text:'learn angular', steps : [ { text : 'learn' }, { text : 'to' }, { text : 'build' } ]}, {text:'build an angular app', steps : [ { text : 'build' }, { text : 'and' }, { text : 'they' }, { text : 'will' }, { text : 'come' } ]} ]; $scope.activeTodo = $scope.todos[0]; $scope.addTodo = function() { var todo = {text:$scope.todoText, steps: []}; $scope.todos.push(todo); $scope.todoText = ''; $scope.activeTodo = todo; }; $scope.changeActive = function(active) { $scope.activeTodo = active; }; $scope.addStep = function() { $scope.activeTodo.steps.push({text:$scope.stepText}); $scope.stepText = ''; }; }
CSS:
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css"> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> <style> .isactive-true { background: YELLOW; }