下面是一个完整的 AngularJS 示例 App，实现一个简单的待办事项清单（To-Do List），你可以直接复制粘贴到 .html 文件中运行：
✅ 示例：AngularJS 待办事项 App
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<meta charset="UTF-8">
<title>AngularJS ToDo App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<style>
body { font-family: Arial; padding: 20px; }
ul { list-style-type: none; padding: 0; }
li { margin: 5px 0; }
.completed { text-decoration: line-through; color: gray; }
</style>
</head>
<body ng-controller="TodoController">
<h1>我的待办事项</h1>
<input type="text" ng-model="newTask" placeholder="添加新任务" />
<button ng-click="addTask()">添加</button>
<ul>
<li ng-repeat="task in tasks">
<input type="checkbox" ng-model="task.done">
<span ng-class="{completed: task.done}">{{ task.text }}</span>
<button ng-click="removeTask($index)">删除</button>
</li>
</ul>
<p>剩余任务：{{ remaining() }}</p>
<script>
var app = angular.module('todoApp', []);
app.controller('TodoController', function($scope) {
$scope.tasks = [
{ text: '学习 AngularJS', done: false },
{ text: '做一个示例 App', done: true }
];
$scope.addTask = function() {
if ($scope.newTask) {
$scope.tasks.push({ text: $scope.newTask, done: false });
$scope.newTask = '';
}
};
$scope.removeTask = function(index) {
$scope.tasks.splice(index, 1);
};
$scope.remaining = function() {
var count = 0;
angular.forEach($scope.tasks, function(task) {
if (!task.done) count++;
});
return count;
};
});
</script>
</body>
</html>
🧠 你可以学到：
| 功能 | AngularJS 语法 |
|---|---|
| 数据绑定 | {{ task.text }} |
| 控制器 | ng-controller="TodoController" |
| 模型绑定 | ng-model="newTask" |
| 列表渲染 | ng-repeat="task in tasks" |
| 条件样式 | ng-class="{completed: task.done}" |
| 事件处理 | ng-click="addTask()" |
运行结果如下：
