当前位置：首页 > news >正文

AngularJS 待办事项 App

news 来源：原创 2025/6/24 22:49:19

下面是一个完整的 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()"`