Scribd Logo
Upload

Welcome to Scribd!

  • PGM 6 Js

    Uploaded by

    Jaikishore M
    6 views3 pages
    This document describes an AngularJS program to create a simple to-do list application that allows users to add, edit, and delete tasks. The program includes default tasks, a form to add new tasks, a table to display tasks, and functionality to edit and delete existing tasks.

    Original Description:

    Original Title

    pgm 6 js

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document describes an AngularJS program to create a simple to-do list application that allows users to add, edit, and delete tasks. The program includes default tasks, a form to add new tasks, a table to display tasks, and functionality to edit and delete existing tasks.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    6 views3 pages

    PGM 6 Js

    Uploaded by

    Jaikishore M
    This document describes an AngularJS program to create a simple to-do list application that allows users to add, edit, and delete tasks. The program includes default tasks, a form to add new tasks, a table to display tasks, and functionality to edit and delete existing tasks.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 3

    6)Develop an AngularJS program to create a simple to-do list application.

    Allow users to add, edit,


    and
    deletetasks.Note: The default values for tasks may be included in the program.

    <!DOCTYPE html>
    <html ng-app="todoApp">

    <head>
    <title>AngularJS Todo List</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    </head>

    <body ng-controller="todoController">

    <h1>Todo List</h1>

    <!-- Form for adding a new task -->


    <form ng-submit="addTask()">
    Task:
    <input type="text" ng-model="newTask" required>
    <button type="submit">Add Task</button>
    </form>

    <br>

    <!-- Table to display task information -->


    <table>
    <thead>
    <tr>
    <th>Task</th>
    <th>Action</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="task in tasks">
    <td>{{ task }}</td>
    <td>
    <button ng-click="editTask($index)">Edit</button>
    <button ng-click="deleteTask($index)">Delete</button>
    </td>
    </tr>
    </tbody>
    </table>

    <!-- Edit Task Model -->


    <div ng-if="editingTaskIndex !== null">
    <h2>Edit Task</h2>
    Task:
    <input type="text" ng-model="tasks[editingTaskIndex]" required>
    <br>
    <button ng-click="saveEdit()">Save</button>
    <button ng-click="cancelEdit()">Cancel</button>
    </div>

    <script>
    var app = angular.module('todoApp', []);
    app.controller('todoController', function ($scope) {
    $scope.tasks = ['Task 1', 'Task 2', 'Task 3'];
    $scope.newTask = '';
    $scope.editingTaskIndex = null;

    $scope.addTask = function () {
    $scope.tasks.push($scope.newTask);
    $scope.newTask = '';
    };
    $scope.editTask = function (index) {
    $scope.editingTaskIndex = index;
    };

    $scope.saveEdit = function () {
    $scope.editingTaskIndex = null;
    };

    $scope.cancelEdit = function () {
    $scope.editingTaskIndex = null;
    };

    $scope.deleteTask = function (index) {


    $scope.tasks.splice(index, 1);
    };
    });
    </script>

    </body>

    </html>

    You might also like