Angular——todos案例

基本介绍
（1）视图绑定两个数组，分别对应未完成和已完成
（2）数组的删除splice()，数组的追加push()
基本使用
<!DOCTYPE html>
<html lang="en" ng-app="Todos">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            margin: 120px auto;
            width: 400px;
            border: 1px solid #000;
        }

        .add {
            height: 40px;
            padding-left: 100px;
            border-bottom: 1px solid #ccc;
        }

        .add input {
            width: 300px;
            height: 40px;
            border: none;
            outline: none;
            font-size: 16px;
        }

        .undone {

        }

        .undone span {
            font: 800 20px "微软雅黑";
            display: block;
            margin-top: 9px;
            margin-bottom: 9px;
        }

        .undone ul {
            list-style: none;
        }

        .done {

        }

        .done span {
            font: 800 20px "微软雅黑";
            display: block;
            margin-top: 9px;
            margin-bottom: 9px;
        }

        .done ul {
            list-style: none;
        }
    </style>
    <script src="../libs/angular.min.js"></script>
</head>
<body>
<div class="wrap" ng-controller="TodosController">
    <div class="add">
        <form ng-submit="add()">
            <input type="text" ng-model="value">
        </form>
    </div>
    <div class="undone">
        <span>未完成</span>
        <ul>
            <li ng-repeat="(key,todo) in undone">
                <div>
                    <input type="checkbox" ng-checked="todo.flag" ng-click="finish(key)">
                    {{todo.text}}
                </div>
            </li>
        </ul>
    </div>
    <div class="done">
        <span>已完成</span>
        <ul>
            <li ng-repeat="(key,todo) in done">
                <div>
                    <input type="checkbox" ng-checked="todo.flag">
                    {{todo.text}}
                    <button ng-click="delete(key)">删除</button>
                </div>
            </li>
        </ul>
    </div>
</div>
<script>
    var Todos = angular.module('Todos', []);
    Todos.controller('TodosController', ['$scope', function ($scope) {
        $scope.undone = [];
        $scope.done = [];
        $scope.add = function () {
            $scope.undone.push({text: $scope.value, flag: false});
        }
        $scope.finish = function (key) {
            var obj = $scope.undone.splice(key, 1)[0];
            obj.flag = true;
            console.log(obj);
            $scope.done.push(obj);
        }

        $scope.delete = function (key) {
            $scope.done.splice(key, 1);
        }
    }]);
</script>
</body>
</html>