关闭

[angularjs]hello world

587人阅读 评论(0) 收藏 举报
<!doctype html>
<html ng-app>
  <head>
    <script src="../angular.min.js"></script>
    <script>
		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>
		.done-true {
		  text-decoration: line-through;
		  color: grey;
		}
    </style>
  </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-primary" type="submit" value="add">
      </form>
    </div>
  </body>
</html>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:44177次
    • 积分:1090
    • 等级:
    • 排名:千里之外
    • 原创:68篇
    • 转载:2篇
    • 译文:0篇
    • 评论:13条
    文章分类
    最新评论