angular-todolist

最新推荐文章于 2024-03-30 00:26:39 发布

to u be

最新推荐文章于 2024-03-30 00:26:39 发布

阅读量708

点赞数

分类专栏： angularjs

本文链接：https://blog.csdn.net/yu88288356/article/details/68948204

版权

angularjs 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <!-- <link rel="stylesheet" href="node_modules/normalize-css/normalize.css">-->
    <script src="node_modules/.3.2.1@jquery/dist/jquery.js"></script>
    <script src="node_modules/.1.6.3@angular/angular.js"></script>
    <script src="node_modules/.0.4.2@angular-ui-router/release/angular-ui-router.js"></script>
  <!--<script src="js/base.js"></script>-->
    <style>
        #content{
            width: 400px;
            margin: 5px auto;
            background-color:#f5f5f5;
            border: 1px solid #eee;
            border-radius:4px;
            padding: 15px;
        }
        ul{
            list-style: none;
            padding: 0;
            margin: 0 0 10px 0;
        }
    </style>
</head>

<body ng-a="helloworld">
<!--111-->
<div id="content" ng-app="todo">
<h2>任务列表</h2>
<div ng-controller="todoListCtrl">

    <p>一共任务：{{todos.length}}</p>
    <p>未完成任务：{{remain()}}</p>
    <p>已完成任务：{{todos.length - remain()}}</p>
    <ul>
        <li ng-repeat="todo in todos">
            <!--这个我明白le  todo在这里已经有现实意义了-->
            <p>{{todo}}</p>

            <input type="checkbox" ng-model='todo.done'>
            <span ng-bind="todo.text"></span>
            <button ng-click="delet()">删除</button>
        </li>
    </ul>

    <div  class="form-horizontal">
        <div class="form-group">
            <div class="col-sm-9">
                <input type="text" ng-model='todoText' placeholder="填入新任务" class="form-control">
            </div>
            <div class="col-sm-2">
                <button class="btn btn-primary" ng-click="addTodo()">添加</button>
            </div>
        </div>
    </div>
</div>
</div>
<!--end-->

<script>
    var todo = angular.module('todo', []);
    todo.controller('todoListCtrl', ['$scope', function($scope){
        $scope.todos = [
            {text:'1',done:false},
            {text:'2',done:false},
            {text:'3',done:false}
        ];
     $scope.addTodo=function () {
         $scope.todos.push({
             text: $scope.todoText,
             done:false
         })
         $scope.todoText=''
     }

     $scope.remain=function () {
         var i=0
         $scope.todos.forEach(function (ele) {
             if(!ele.done){
                 i++
             }
         })
         return i
     }
//这个不是很理解  后来明白了哈哈
     $scope.delet=function () {
         console.log(todo)
         console.log(1)
        //在todos数组中将当前todo删去
         $scope.todos.splice(todo,1);

     }
    }]);
</script>

</body>
</html>

to u be

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
angular-todolist

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>  <script src="node_modu
复制链接

扫一扫