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