今天学习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>@H_740_502@
-
app
-
var memoApp = angular.module('memoApp',[]);@H_740_502@
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);
})
}
});@H_740_502@
效果图：
