angularJS任务列表例子

来源：互联网发布：淘宝店铺年销售额查询编辑：程序博客网时间：2024/06/09 12:09

这里写图片描述

<!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)

0 0