todolist

来源：互联网发布：世纪佳缘数据库.zip 编辑：程序博客网时间：2024/05/16 10:28
<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>Angularjs</title>    <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>    <style type="text/css">        h1 {    text-align: center;    font-family: 'MicroSoft Yahei';}.container {    width: 620px;    margin: 0 auto;}.form-control{    margin-left: 10px;    width: 400px;    height: 30px;    line-height: 30px;    border-radius: 3px;    border: 1px solid #ebebeb;}.btn{    height: 30px;    width:100px ;    border-style: none;    background-color: #fff;    border-radius: 3px;    border :1px solid #ebebeb;}.list-group{    padding:12px;    list-style: none;    line-height: 60px;}.close {    height: 30px;    width:100px ;    border-style: none;    background-color: #fff;    border-radius: 3px;    border :1px solid #ebebeb;    float: right;    margin-top: 16px;    margin-right: 88px;}.ng-binding {    font-family: 'MicroSoft Yahei';}.done {    color: #cca;}p{    font-family: 'MicroSoft Yahei';}    </style></head><body >    <div class="container" ng-app="List">        <header>            <h1>TODO LIST</h1>            <hr></header>        <!-- 内容部分-->        <section ng-controller="maincontroller">            <form>                <input type="text" class="form-control" ng-model="text" name="">                    <button class="btn" ng-click="add()">Add</button>            </form>            <ul class="list-group">                <li ng-repeat="item in todolist" >                <button type="button" class="close" ng-click="delete(item)">                    <span>×</span>                    <span>Close</span>                </button>                    <div>                        <label>                            <span>{{item.text }}</span>                        </label>                    </div>                </li>            </ul>            <p>                总共 <strong>{{todolist.length }}</strong>个            </p>        </section>    </div>    <script type="text/javascript">            var List = angular.module('List',[]);    List.controller('maincontroller'        ,['$scope',function($scope){            $scope.text = '';             $scope.todolist = [{                text:'HTML5',            },{                text:'CSS3',            }];            // 添加            $scope.add = function(){                var text = $scope.text.trim();                if(text) {                    $scope.todolist.push({                        text:text,                    });                    $scope.text = '';                }            }            // 删除            $scope.delete = function(todo){                var index = $scope.todolist.indexOf(todo)                $scope.todolist.splice(index,1);            }            $scope.doneCount = function(){                var temp = $scope.todolist.filter(function(item){                });                return temp.length;            }    }]);    </script></body></html>
0 0