AngularJS 待办事项 App

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

运行结果如下:

相关推荐
ObjectX前端实验室7 分钟前
从零到一:系统化掌握大模型应用开发【目录】
前端·llm·agent
guoyp212614 分钟前
前端实验(二)模板语法
前端·vue.js
葡萄城技术团队20 分钟前
Excel 转在线协作难题破解:SpreadJS 纯前端表格控件的技术方案与实践
前端·excel
我的xiaodoujiao20 分钟前
Windows系统Web UI自动化测试学习系列3--浏览器驱动下载使用
前端·windows·测试工具·ui
一只小风华~22 分钟前
学习笔记:Vue Router 中的嵌套路由详解[特殊字符]概述
前端·javascript·vue.js
泻水置平地23 分钟前
若依前后端分离版实现前端国际化步骤
前端
Villiam_AY25 分钟前
从后端到react框架
前端·react.js·前端框架
CodeCraft Studio28 分钟前
全球知名的Java Web开发平台Vaadin上线慧都网
java·开发语言·前端·vaadin·java开发框架·java全栈开发·java ui 框架
一只小风华~35 分钟前
Vue Router 命名路由学习笔记
前端·javascript·vue.js·笔记·学习·ecmascript
我是华为OD~HR~栗栗呀39 分钟前
前端面经-高级开发(华为od)
java·前端·后端·python·华为od·华为·面试