angularJS任务列表例子

最新推荐文章于 2023-07-16 21:09:04 发布

小鱼儿_zhang

最新推荐文章于 2023-07-16 21:09:04 发布

阅读量934

点赞数

分类专栏： AngularJS（前言）文章标签： angularjs

本文链接：https://blog.csdn.net/qq_20261343/article/details/50493428

版权

AngularJS（前言）专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这里写图片描述

<!DOCTYPE html>
<html ng-app="task-app">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>angualJS</title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">

    <style type="text/css" media="screen">
        body{
            max-width: 600px;
        }
        .checkbox{
            margin-bottom: 0;
            margin-right: 20px;
        }

        .done{
            color: #ccc;

        }
        .done > .checkbox>label>span{
            text-decoration: line-through;
        }
    </style>
</head>
<body class="container text-center">
<div class="page-header">
    <h1>任务列表</h1>
</div>

<section ng-controller="myControl">
    <!-- 输入框 -->
    <form class="input-group input-group-lg">
        <input class="form-control" ng-model="text" />
        <span class="input-group-btn">
            <button type="button" class="btn btn-secondary" ng-click="addTask()">添加</button>
        </span>
    </form>

    <!-- 任务列表 -->
    <ul class="list-group text-left">
        <li class="list-group-item" ng-class="{'done':item.done}"  ng-repeat ="item in taskList" >

        <button type="button" class="close" aria-label="Close" ng-click="delete()"><span aria-hidden="true">&times;</span></button>

        <div class="checkbox">
            <label>
                <input type="checkbox" ng-model="item.done">
                <span>{{item.text}} </span>
            </label>            
        </div>          
        </li>

    </ul>
    <p class="text-left">
    总共 <strong>{{taskList.length}}</strong>个任务
    ，已完成<strong>{{doneCount()}}</strong>个
    </p>

</section>



    <script src="./js/angular.min.js"></script>
    <script src="./js/index.js"></script>
</body>
</html>

//立即执行函数的写法不会污染全局
(function() {
    // 获取anagual 并自定已模块
    window.angular.module('task-app', []);

    //task 模块注册控制器
    //$scope ：作用：往视图中暴露数据的
    window.angular.module('task-app').
    controller('myControl', ['$scope', function($scope) {
        //文本框中的值,与文本框作双向绑定
        $scope.text = '';

        //任务列表
        $scope.taskList = [{
            text: 'java',
            done: false
        }];

        //添加任务事件
        $scope.addTask = function() {
            //获取输入的值
            var text = $scope.text.trim();

            if (text) {
                $scope.taskList.push({
                    text: text,
                    done: false
                });

                $scope.text = '';
            }
        };

        //删除任务事件
        $scope.delete = function(todo) {
            //找到索引
            var index = $scope.taskList.indexOf(todo);

            //实现 remove 的操作，
            $scope.taskList.splice(index, 1);
        }

        //已完成的任务个数
        $scope.doneCount = function() {
            var temp = $scope.taskList.filter(function(item) {
                return item.done;
            })

            return temp.length;
        }

    }]);

})(window)