[angularjs]hello world

来源:互联网 发布:网络连接dns未响应 编辑:程序博客网 时间:2024/05/23 19:19
<!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>