AngularJS开发记事本小程序
Posted admin-NaN
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AngularJS开发记事本小程序相关的知识，希望对你有一定的参考价值。
这是html代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>NoteBook</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/index.css">
<script src="js/angular.min.js"></script>
</head>
<body ng-app="Todos">
<section class="todoapp" ng-controller="TodosCtrl">
<header class="header">
<h1>NOTE</h1>
<form ng-submit="add()">
<input class="new-todo" ng-model="todo" placeholdder="You need to do something!!" autofocus>
</form>
</header>
<section class="main">
<input class="toggle-all" type="checkbox">
<label for="toggle-all">Mark all as complete</label>
<ul class="todo-list">
<li ng-repeat="todo in todos" ng-class="{completed: todo.flag}">
<div class="view">
<input class="toggle" ng-click="toggle($index)" type="checkbox" ng-checked="todo.flag">
<label>{{todo.text}}</label>
<button class="destroy" ng-click="delete($index)"></button>
</div>
<input class="edit" value="Create a TodoMVC template">
</li>
</ul>
</section>
<footer class="footer">
<span class="todo-count"><strong>{{length}}</strong> item left</span>
<button class="clear-completed" ng-click="clear()">Clear completed</button>
</footer>
</section>
<script>
var Todos = angular.module(‘Todos‘, []);
Todos.controller(‘TodosCtrl‘, [‘$scope‘, function ($scope) {
// 声明一个数组，用来存储待办事项
$scope.todos = [
{text: ‘写日记‘, flag: true},
{text: ‘做饭‘, flag: false},
{text: ‘洗脸‘, flag: true},
{text: ‘刷牙‘, flag: true},
];
$scope.add = function () {
// 向数组中添加数据
$scope.todos.push({text: $scope.todo, flag: false});
// 清空表单
$scope.todo = ‘‘;
$scope.length=$scope.count();
};
// 切换事项状态（完成/未完成）
$scope.toggle = function (index) {
// 改变数组中某单元的flag属性
$scope.todos[index].flag = !$scope.todos[index].flag;
$scope.length=$scope.count();
};
// 删除事项
$scope.delete = function(index) {
// 将数组中某单元删除
$scope.todos.splice(index, 1);
$scope.length=$scope.count();
};
$scope.clear = function (){
for (var i=0 ;i< $scope.todos.length ; i++){
if($scope.todos[i].flag==true){
$scope.delete(i);
$scope.clear();
}
}
};
$scope.count=function(){
var count=0;
for(var i=0;i<$scope.todos.length;i++){
if($scope.todos[i].flag==false){
count++;
}
}
return count;
}
$scope.length=$scope.count();
}]);
</script>
</body>
</html>
这是base.css文件（注意，请用less）
hr {
margin: 20px 0;
border: 0;
border-top: 1px dashed #c5c5c5;
border-bottom: 1px dashed #f7f7f7;
}
.learn a {
font-weight: normal;
text-decoration: none;
color: #b83f45;
}
.learn a:hover {
text-decoration: underline;
color: #787e7e;
}
.learn h3,
.learn h4,
.learn h5 {
margin: 10px 0;
font-weight: 500;
line-height: 1.2;
color: #000;
}
.learn h3 {
font-size: 24px;
}
.learn h4 {
font-size: 18px;
}
.learn h5 {
margin-bottom: 0;
font-size: 14px;
}
.learn ul {
padding: 0;
margin: 0 0 30px 25px;
}
.learn li {
line-height: 20px;
}
.learn p {
font-size: 15px;
font-weight: 300;
line-height: 1.3;
margin-top: 0;
margin-bottom: 0;
}
#issue-count {
display: none;
}
.quote {
border: none;
margin: 20px 0 60px 0;
}
.quote p {
font-style: italic;
}
.quote p:before {
content: ‘“‘;
font-size: 50px;
opacity: .15;
position: absolute;
top: -20px;
left: 3px;
}
.quote p:after {
content: ‘”‘;
font-size: 50px;
opacity: .15;
position: absolute;
bottom: -42px;
right: 3px;
}
.quote footer {
position: absolute;
bottom: -40px;
right: 0;
}
.quote footer img {
border-radius: 3px;
}
.quote footer a {
margin-left: 5px;
vertical-align: middle;
}
.speech-bubble {
position: relative;
padding: 10px;
background: rgba(0, 0, 0, .04);
border-radius: 5px;
}
.speech-bubble:after {
content: ‘‘;
position: absolute;
top: 100%;
right: 30px;
border: 13px solid transparent;
border-top-color: rgba(0, 0, 0, .04);
}
.learn-bar > .learn {
position: absolute;
width: 272px;
top: 8px;
left: -300px;
padding: 10px;
border-radius: 5px;
background-color: rgba(255, 255, 255, .6);
transition-property: left;
transition-duration: 500ms;
}
@media (min-width: 899px) {
.learn-bar {
width: auto;
padding-left: 300px;
}
.learn-bar > .learn {
left: 8px;
}
}
最后别忘记引入angular.min.js文件，以及初始化样式的index.css文件（网上有很多）。
以上是关于AngularJS开发记事本小程序的主要内容，如果未能解决你的问题，请参考以下文章