Clicking on "Ng-Click" will add a fresh row to the table using Angular

Is there a way to insert a new row into a table using ng-click? I currently have the following setup with the data stored in an array.

Here is how my array looks.

$scope.workflows = [{
                Id: 1,
                Name: "Workflow Page 1",
                Description: "Describe Workflow",
                Steps: [{
                    Id: 1,
                    Name: "name me",
                    Description: "describe me",
                    Action: "do something",
                    Obj: "whats the goal",
                    AdditionalInfo: "anything else",
                }, {
                    Id: 2,
                    Name: "name me",
                    Description: "describe me",
                    Action: "do something",
                    Obj: "whats the goal",
                    AdditionalInfo: "anything else",
                },
                ]},

          }, ];

This is the new data that I want to add to my array and here's how I am attempting to do it using $scope.

$scope.addStep = function(newStep) {
   $scope.newStep = [{
          Id: 0,
          Name: "Step on THIS!",
          Description: "I dare ya!",
          Action: "STOMP!",
          Obj: "A Rock",
          AdditionalInfo: "I am bleeding...",
        }]

   $scope.workflows.push(newStep);
     alert("test :" + "Its GON WORK");

 };

In the HTML, I trigger the addStep function using ng-click, hoping it will add a new row to my table.

<div class="text" ng-click="addStep(newStep)"> + Click to Add a New Step</div>

Thank you!

Answer №1

Consider updating your ng-click to: ng-click="performTask()"

And in your controller:

    $scope.performTask = function() {
        // Implement all the necessary actions

        $scope.tasks.push($scope.newTask); // Updated line
    };

Answer №2

To insert a new step into the initial workflow's list of steps, use the following method. Provide the workflow's index as an argument in the `addStep` function to specify where the new step gets added.

$scope.addStep = function() {
    $scope.newStep = {
      Id: 0,
      Name: "Step on THIS!",
      Description: "I dare ya!",
      Action: "STOMP!",
      Obj: "A Rock",
      AdditionalInfo: "I am bleeding...",
    };

    $scope.workflows[0].Steps.push($scope.newStep); // This adds the new step ($scope.newStep) to the first workflow's list of Steps
};

<div class="text" ng-click="addStep()"> + Click to Add a New Step</div>

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

Invalid Data Pusher for User Information in Next JS

Hello everyone, I've been practicing using Pusher with Next.js but encountered an issue where it's showing Error: Invalid user data: 'presence-channel' and I can't seem to solve it no matter how hard I try. Could someone please he ...

Fetching data from a ColdFusion component using AJAX

Having trouble performing an SQL COUNT on my database using AJAX through a cfc file, and I can't figure out how to retrieve the return variable. Here's the relevant section of the cfc file: <cffunction name="getSpeakerCount" access="remote" r ...

Create a consistent number based on quantity

Looking to generate a sequence of numbers equal to the count in PHP or JavaScript for my application. For example, if my total count is 7: <?php $total = 7; I would like to generate seven 1's like this: $split_one = [1,1,1,1,1,1,1]; If my count ...

Is the Vue-portal enabled conditionally?

I am looking to include some additional information in the navbar (parent component) using Vue Portal. So, within a component, I can use the following code: <portal to="navbar"> <b-button>Some option</b-button> </portal&g ...

What is causing the material design dialog body to appear without any height on an iPad?

Currently, my web application utilizes angularjs along with material-design. For adding and editing certain records from the database, I rely on md-dialog. It works perfectly on desktop browsers except for IE (which is not surprising). Check out how it sh ...

Validating emails using Vue.js

After spending a solid 24 hours working with Vue, I realize there may be some gaps in my knowledge. Despite my efforts to search for solutions, I suspect that my lack of understanding on basic principles is hindering me. One issue I've encountered is ...

Vue - Implementing plugin as a prototype functionality

For notifications in my application, I've incorporated the euvl/vue-notification library. Each time I need to notify the user, I have to include the following code: If I'm within a Vue component: this.$notify({ group: 'panel', ...

Encountering a timeout error when connecting to MongoDB

Utilizing node.js v12.0.10, I have incorporated MongoDB database to establish a connection and update MongoDB collection with the following connection code: async.parallel({ RE5: function (cb) { MongoClient.connect(config.riskEngineDB ...

Deciphering HTML with AngularJS

We are currently working with AngularJS version 1.5.6 and facing an issue with HTML characters not being displayed correctly in our text. Despite trying various solutions, we have been unsuccessful in resolving this issue. We have explored numerous discuss ...

My current array is arr=[1,2,3,4]. I recently added an element to it using arr.push(5). Now I want to rearrange the array to be [5,4,3,2,1]. Any suggestions on how to achieve this

I currently have an array in the following format: var arr = [1,2,3,4] // Add another element to the array arr.push(5) // Now, arr = [1,2,3,4,5] I want to print my array as The elements in the array arr are: 5,1,2,3,4 When I use Arr.reverse(), it retu ...

refusing to display the pop-up in a separate window

Hi there, I'm having an issue with a link that's supposed to open in a pop-up but is instead opening in a new tab. I'd like it to open in a proper pop-up window. <button class="button button1" onclick=" window.open('te ...

How can I utilize the pick parameter in nuxtjs3 useFetch for selecting arrays or performing a deep pick?

Currently working on my nuxtjs3 project, where I am extracting data from an API. Specifically using jsonPlaceholder for this task. Extracting data from a single object is not a problem: const { data: useFetchOnly } = await useFetch('https://jsonplace ...

Can you please share your methods for fetching and caching paginated collections, particularly within the context of Angular or Restangular?

In an app that retrieves data from a REST api with paginated collections of potentially infinite size, how can we effectively handle fetching, caching, and invalidating this data? Imagine the API endpoint is: GET /users?page=1&per_page=50 The respon ...

A guide on extracting split values and assigning them to individual variables

Currently, I'm working on a project utilizing node.js, express, mongo, and socket.io. After successfully retrieving geolocation coordinates and storing them in a hidden input field, I encountered an issue when attempting to save the data into the data ...

Loading HTML content in a WPF WebBrowser without encountering security messages

Currently, I am developing a WPF application in which I create the content of an HTML file as a string (including some JavaScript functions for calculations). After generating the string, I save it as an HTML file on my local disk and then reload it using ...

What is the best approach for transmitting data to the post method of Node.js using AJAX/jQuery?

A UDP server I have is set up to respond with a different message each time it receives a message. When I hard code the message into the variable "message," everything works fine. However, I want the client to be able to manually type in a message, and t ...

Refresh the table following the removal of an item

I am currently working on displaying server data in a table. The delete function is functioning properly, but the deleted item only disappears from the table after refreshing the page. Is there a way to trigger a re-render of the component after deleting a ...

What impact does the depth of an array have on performance in PHP?

While there are similar questions on this topic, the arrays I have are quite unique. First array structure : array( [0] => array( 'stat1' => 50, 'stat2' => 12, 'stat3' => 0, &a ...

The functionality of React setState seems to be malfunctioning when activated

Having encountered an unusual issue with react's setState() method. Currently, I am utilizing Azure DevOps extensions components and have a panel with an onClick event that is intended to change the state of IsUserAddedOrUpdated and trigger the addOr ...

Determining the Location of a Drag and Drop Item

I have been utilizing the code found at for implementing Drag & Drop functionality. My inquiry is: How can I retrieve the exact position (x,y) of a group once it has been dragged and dropped? ...