Enhancing user experience with AngularJS: Harnessing ng-Click for seamless task management on display pages

I'm struggling with my TodoList in AngularJS. I need help creating the ngClick function for the "addTodo" button. My goal is to send the entire form data to another page where I can display the tasks. Can someone guide me on what needs to be added to the ng-click method and in todos-data.js? Here is a snippet of my code:

In todos-data.js (I currently manually add tasks, but I want to add them from the form):

app.factory('todos', function () { return [
  {
      'title': 'Date with Julia', 'done': false, "type": { "name":
      "Personal", "gico": "heart" }, 'estimates': 3, "date": "11/11/2015"
    },
    {
      'title': 'Gym', 'done': false, "type": { "name":
      "Health", "gico": "tint" }, 'estimates': 2, "date": "12/11/2015"
    },
    {
      'title': 'Next steps in AngularJS', 'done': false, "type": { "name":
      "Learning", "gico": "book" }, 'estimates': 4, "date": "14/11/2015"
    },
    {
      'title': 'Meeting with Jan', 'done': false, "type": { "name":
      "Business", "gico": "usd" }, 'estimates': 1, "date": "15/11/2015"
    },
    {
       'title': 'Run errands', 'done': false, "type": { "name":
       "Personal", "gico": "heart" }, 'estimates': 6, "date": "16/05/2015"
    }
  ];
});

Below is the form with the button:

edit.tpl.html

<div class="panel-body">
<form name="f" data-ng-submit="addTodo()">
  <label for="title">Name:</label>
  <input class="form-control" id="title" name="newTodo" data-ng-model="formData.newTodo" required>
  <label for="type">Type:</label>
  <select class="form-control" id="type" name="type" data-ng-model="formData.type" required>
    <option ng-repeat="value in categories" value="value.name">{{value.name}}</option>
  </select>
  <label for="estimates">Estimated time:</label>
  <select class="form-control" id="estimates" name="estimates" data-ng-model="formData.estimates" data-ng-options="value + 'h' for value in [] | rangeTime:9:true" >
  </select>
  <label for="text">Date:</label>
  <input class="form-control" id="text" type="text" data-ng-model="formData.date" data-ng-date-picker="" name="date" required readonly="readonly">
  <br />
  <button class="btn btn-success" data-ng-disabled="f.$invalid" ng-click="addTodo()">Add  <span class="glyphicon glyphicon-ok"></span></button>
</form>

Answer №1

To achieve this functionality, it is necessary to develop a controller. Within this controller:

var app = angular.module('myApp');
app.controller('myController', function($scope){
    $scope.addTodo = function(formData){
         $scope.items = formData;
    }
});

After creating the controller, you can implement the display on the desired page by utilizing 'ng-repeat'.

Answer №2

If you want to implement a similar functionality in your project, you can create a factory and then define the method in your controller by injecting the factory. Here is an example:

app.factory('todos', function () {
        return {
            todoArr: [{
                'title': 'Date with Julia',
                'done': false,
                "type": {
                    "name":
                        "Personal",
                    "icon": "heart"
                },
                'estimates': 3,
                "date": "11/11/2015"
            }, {
                'title': 'Gym',
                'done': false,
                "type": {
                    "name":
                        "Health",
                    "icon": "tint"
                },
                'estimates': 2,
                "date": "12/11/2015"
            }, {
                'title': 'Next steps with AngularJS',
                'done': false,
                "type": {
                    "name":
                        "Learning",
                    "icon": "book"
                },
                'estimates': 4,
                "date": "14/11/2015"
            }, {
                'title': 'Meeting with Jan',
                'done': false,
                "type": {
                    "name":
                        "Business",
                    "icon": "usd"
                },
                'estimates': 1,
                "date": "15/11/2015"
            }, {
                'title': 'Run, Forest, Run!',
                'done': false,
                "type": {
                    "name":
                        "Personal",
                    "icon": "heart"
                },
                'estimates': 6,
                "date": "16/05/2015"
            }],

            addToList: function (title, done, name, Personal, icon, estimates, date) {
                this.todoArr.push({
                    'title': title,
                    'done': done,
                    'type': {
                        'name': Personal,
                        'icon': icon
                    },
                    'estimates': estimates,
                    'date': date
                });
        }
    };
    });

In your controller:

.controller("main", function ($scope, todos) {
  $scope.add = todos.addToList;

})

And in your HTML:

<button ng-click="add(title, done, name, Personal, icon, estimates, date)">Add</button>

There are more efficient ways to handle the parameters instead of passing them individually like this. You can use ng-model to get them from a form input easily.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the most effective way to organize an array according to a key function that is computationally intensive?

After posting this question regarding sorting an array with a key function, it became evident that utilizing a comparison function was inevitable. The challenge at hand includes: Having a resource-intensive key function that needs to be transformed into ...

What is the best way to create a gradual color change in each individual cell instead of changing all at once?

Looking for some help with a grid I'm working on. I've got the cells changing colors like I want them to, but they're all changing at once. What I really need is for them to light up in a specific order - Yellow, Green, Blue, White, Orange. ...

There was an issue encountered when trying to call a PHP file within an HTML table using Ajax and data.html

For a small project, I have various news items that need to be included from the "news_all.php" file into table data within the "dashboard.php" file. Due to the predefined root structure restrictions, using include('news.php') is not an option. I ...

Add new content to an existing JSON file in a Node.js environment

I'm encountering an issue while attempting to insert new text into an existing JSON file. I've experimented with writeFileSync and appendFileSync methods, however the added text does not maintain JSON formatting even when utilizing JSON.stringify ...

CarouFredSel Transition Troubles

I am currently using CarouFredSel to create an image carousel, but I am encountering some issues with the transitions between items. My goal is to incorporate simple HTML elements into the carousel instead of just plain images. However, when I attempt to ...

Validate that a string is a correct file name and path in Angular without using regular expressions

Currently, I am using regex to determine if a string is a valid file name and path. However, when the string length becomes longer, it ends up consuming a significant amount of CPU, resulting in browser performance issues. public static readonly INVALID_F ...

Having trouble with your JavaScript regex not functioning properly?

I am currently working with an array of arrays and I need to iterate through it to retrieve each word, excluding any "@", punctuation, and hashtags. However, my regular expression seems to be removing certain words entirely from the array and I can't ...

What is the best way to supply JSON data to the "The Wall" MooTools plugin while feeding?

I came across this amazing plugin called "The Wall" but unfortunately, neither the documentation nor the examples demonstrate how to utilize JSON objects with it. Imagine we have a JSON array like: [ { href : "/my/photo/image1.jpg", title : "Me an ...

The CloudWatch logs for a JavaScript Lambda function reveal that its handler is failing to load functions that are defined in external

Hello there, AWS Lambda (JavaScript/TypeScript) is here. I have developed a Lambda handler that performs certain functions when invoked. Let me walk you through the details: import { APIGatewayProxyEvent, APIGatewayProxyResult } from 'aws-lambda' ...

Having trouble getting the calendar to display correctly on the FullCalendar AngularJS Directive

As a beginner in AngularJS, I am facing the challenge of integrating an Admin LTE full calendar feature into my web application. Fortunately, I came across an Angular directive specifically designed for the Arshaw FullCalendar JQuery plugin. You can check ...

Having trouble with AJAX calling an ASP.NET web method

When attempting to call an asp.net web method in my ajax request, the defined web method is structured like this: [WebMethod()] public static int DropDownIndexChanged(string selectedText) { int a = 5; // This is just for testing purposes return a; } ...

401 (Unauthorized) Error on retrieving data

I am currently developing a basic login feature using the HTTP Auth Interceptor Module. Within my LoginController, the code looks like this: angular.module('Authentication') .controller('LoginController', ['$scope', '$r ...

Is there a way to send all the results of a Flask database query to a template in a way that jQuery can also access

I am currently exploring how to retrieve all data passed to a template from a jQuery function by accessing Flask's DB query. I have a database table with customer names and phone numbers, which I pass to the template using Flask's view method "db ...

The AngularJS functionality is failing to execute within the Dockerfile during the npm installation process. The issue

Update: I encountered an issue where I can't name the container client. There seems to be a hidden container that I am unable to delete, causing some inconvenience. I am in the process of setting up a Docker file environment for a MEAN stack applicat ...

Utilize Ionic's robust filtering capabilities across various fields

I recently joined an ongoing Ionic Cordova project that is only partially complete. My goal is to enhance the search functionality by allowing users to search for products using either their product name or product code. Currently, the search function only ...

Error: export keyword used incorrectly

Currently, I am in the process of developing an npm package called foobar locally. This allows me to make real-time changes and modifications without the need to constantly publish and unpublish the package, which greatly improves my development efficiency ...

Is there a way to retrieve the objects generated by DirectionsRenderer on Google Maps V3?

Is there a simple method to access the objects and properties of the markers and infowindows that are generated by the DirectionsRenderer? (such as the "A" and "B" endpoints of the route) I want to swap out the infowindows for the "A" & "B" markers wi ...

Cool ways to showcase HTML content in AngularJS

I am completely new to AngularJS. My goal is to display HTML content on the view using AngularJS. I initially tried using ng-model, but it displayed HTML content as a string on the view. After that, I attempted to use ng-bind-html which worked for the in ...

Nestjs struggles with resolving dependencies

Having trouble finding the issue in my code. (I'm still new to nestjs and trying to learn by working on some apps). The console log is showing the following error: Nest can't resolve dependencies of the UrlsAfipService (?). Please ensure tha ...

Is there a way to prevent the imported JQuery from causing issues with current code implementations?

Being a novice developer in Html/Javascript/CSS/Jquery coding, I recently encountered an issue while integrating Jquery into my project. When I imported Jquery, the styling of simple buttons went haywire. Jquery worked perfectly fine when using its classes ...