To be or not to be.That is a question!

---源于莎士比亚的《哈姆雷特》

导航

angular todo 

<!DOCTYPE HTML>
<html lang="en-US" ng-app>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="lib/angular.js"></script>
    <script type="text/javascript">
        function TodoCtrl($scope){
            $scope.todos=[{text:"learn angular",done:true},{text:"build an angular app",done:false}];
            $scope.addTodo=function(){
                $scope.todos.push({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);
                    }
                })
            }
        }
    </script>
    <style type="text/css">
    .done-true{
        text-decoration: line-through;
        color:grey;
    }
    </style>
    <link rel="stylesheet" href="css/bootstrap-responsive.css">
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<h2>Todo</h2>
    <div ng-controller="TodoCtrl">
      <span>{{remaining()}} of {{todos.length}} remaining</span>
      [ <a href="" ng-click="archive()">archive</a> ]
      <ul class="unstyled">
        <li ng-repeat="todo in todos">
          <input type="checkbox" ng-model="todo.done">
          <span class="done-{{todo.done}}">{{todo.text}}</span>
        </li>
      </ul>
      <form ng-submit="addTodo()">
        <input type="text" ng-model="todoText"  size="30"
               placeholder="add new todo here">
        <input class="btn btn-primary" type="submit" value="add">
      </form>
    </div>
</body>
</html>

 

posted on 2013-10-10 15:30  Ijavascript  阅读(311)  评论(0)  编辑  收藏  举报