angular-备忘录

发布时间：2020-12-17 09:08:08 所属栏目：安全来源：网络整理

导读：今天学习angular,参考教程写了一个小备忘录功能：新增，删除 html页面： !DOCTYPE html html lang = "en" head meta charset = "UTF-8" title Title / title script src = "angular.js" / script style * { box-sizing : border-box ; } .wrap { width : 50

今天学习angular,参考教程写了一个小备忘录
功能：新增，删除
html页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="angular.js"></script>
    <style> *{ box-sizing: border-box; } .wrap{ width:500px; border:1px solid #ddd; font:16px "Microsoft JhengHei"; } .wrap header{ width:100%; height:40px; background: #e0e0e0; border-bottom:1px solid #eee; text-align:left; text-indent:10px; line-height:40px; } .wrap .body{ display: flex; padding: 10px; } .body_check{ padding:10px; } .memo_input{ flex:1; margin-right:10px; border:1px solid #ddd; height:30px; } .btn{ height:30px; background: #00aaaa; border:1px solid #eeeeee; color: #fff; } .btn_red{ background: #ff2a4e; } </style>
</head>
<body>
<div class="wrap" ng-app="memoApp" ng-controller="memoCtrl">
    <header>备忘录</header>
    <div class="body">
        <input ng-model="memoInput" class="memo_input" type="text" size="50">
        <input ng-click="addMemo()" class="btn" type="button" value="新增">
    </div>
    <div class="body_check">
        <div ng-repeat="x in memoList">
            <input type="checkbox" ng-model="x.done">
            <span ng-bind="x.memoText"></span>
        </div>
    </div>
    <div class="body">
        <input ng-click="delMemo()" class="btn btn_red" type="button" value="删除">
    </div>
</div>

<script src="./js/app.js"></script>
<script src="./js/controller.js"></script>
</body>
</html>

app

var memoApp = angular.module('memoApp',[]);

controller

memoApp.controller('memoCtrl',function ($scope) {
    $scope.memoList = [];

    $scope.addMemo = function(){
        if($scope.memoInput == "")
        {
            return;
        }
        $scope.memoList.push({memoText:$scope.memoInput,done:false});
        $scope.memoInput = "";
    };

    $scope.delMemo = function(){
        var oldList = $scope.memoList;
        $scope.memoList = [];
        angular.forEach(oldList,function(x){
            if(!x.done)
                $scope.memoList.push(x);
        })
    }
});

效果图：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!