"Step-by-step guide on adding a new row to a table using a child controller in AngularJS

I have a table where I can insert new rows by opening a dialog window and entering the data. The dialog window contains a child controller called addNewTaskCtrl. Inside this dialog, there is a form that inserts data into the table when the "Add" button is clicked. However, I am facing difficulties connecting the ng-model of the child controller with the parent. Please refer to the DEMO for more information. Pay special attention to the "ADD Task" button.

Additionally, I attempted to insert a new row into the table without using any child controllers. You can view this in action in the following DEMO. Unfortunately, my attempts were not successful. Please see the 'index.html' file for details.

<!DOCTYPE html>
<html>

... (rest of the HTML code) ...

  </script>
</body>

</html>
javascriptangularjs

Answer №1

There are a couple of methods to achieve this:

  1. Develop an object that is shared between both controllers See Example

  2. Emit the modification from the child controller and monitor it in the parent controller by using $rootscope.

Therefore, in your addCntrl:

    $rootScope.$emit("addedTask", newTask);

And in your tasksCntrl

    $scope.$on('addedTask', function(newTask){//handle action });

This should provide some guidance.

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

Display the data returned from a computed property PromiseResult using VueJS

After calculating the property shown below, it will output res, which is a Promise object. The reason I cannot place this script inside the created() or mounted() hook is due to the fact that this.selectedObject is null at that time. I am satisfied with t ...

javascriptvue.jspromisecomputed-properties

Node.js: Breaking the Rules with an Illegal Break Statement

Struggling to generate a unique ID in Node.js and MongoDB, using a while loop that checks existing IDs in MongoDB until a unique value is found. If the ID is already taken, a number is added to the end until Mongo returns no results. Everything seems to b ...

javascriptnode.jsmongodbasynchronouswhile-loop

The Bootstrap image slider is limited to showing a single item at a time

I've been attempting to implement a carousel in Bootstrap 4 that displays multiple items at once and allows scrolling one item at a time, but I can't seem to get it right. Despite going through various tutorials and forum posts, the carousel alwa ...

javascriptjquerymodel-view-controllerbootstrap-4carousel

Combining vueJS and webpack to bring in fonts, CSS styles, and node_modules into your project

I've recently started working with Vue.js and Webpack, and I'm facing some challenges regarding the correct way to import and reference fonts, CSS, and node_modules in my project. My project structure looks like this, as set up by vue-cli: buil ...

javascriptwebpackvue.js

What sets apart `this.user.id` from `this.user = {id: ....}`?

I am puzzled by the error thrown in the code below: import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; @Component({ selector: 'app-user', templateUrl: './user.compone ...

javascriptangulartypescript

Modify a unique element within an array stored in the state using Redux toolkit

I'm currently attempting to modify a property of an object within an array stored in my state. export const changeStatus = createAsyncThunk('changeStatus', async (arg) => { const todo = arg const response = await axios.put(`${URL} ...

javascriptreactjsreduxreact-reduxredux-toolkit

Is there a way to automatically launch a new tab upon arriving from another website?

I currently have a website that displays a table of elements, each with its own set of sub-elements. On another page, I can view the element along with multiple tabs for its corresponding sub-elements. The current setup is depicted as follows: <a clas ...

javascripthtml

Creating a streamlined system for building and deploying an angularjs/asp.net web api

Looking to streamline the deployment process for my AngularJS app and C# WebAPI. The Angular app repo is stored in stash, while the C# REST API is in TFS. Is it feasible to set up an automated build and deployment system for this setup? What options are ...

angularjstfsasp.net-web-api2bitbucket-server

Error in routing of submit button in Express.js

While attempting to create a basic "to-do list" using HTML requests, I encountered an issue with the PATCH request. Instead of redirecting to "/", it redirected to "/posts/2" and displayed the message "Cannot POST /posts/2", without updating the array elem ...

javascriptexpressejs

Safeguard your app's initialization by implementing a tidy method to guarantee only one instance of a

Ensuring a singleton service is created on application boot is crucial. Adding it as an injection parameter to the AppComponent without using it may seem unclean. Currently, I have implemented the following solution: import { APP_INITIALIZER, ModuleWithPro ...

javascriptangular

Skipping element submission in AngularJS when the element is hidden

I am facing an issue with a dropdown list containing enum values. Even when the dropdownlist is hidden using ng-show, the value is still being submitted as ''. As a result, I am encountering the following error: org.codehaus.jackson.map.JsonMapp ...

angularjs

The HTML content retrieved through an ajax service call may appear distorted momentarily until the JavaScript and CSS styles are fully applied

When making a service call using ajax and loading an HTML content on my page, the content includes text, external script calls, and CSS. However, upon loading, the HTML appears distorted for a few seconds before the JS and CSS are applied. Is there a sol ...

javascriptjqueryhtmlcssajax

What is the best way to showcase a bootstrap dropdown within a limited height container while keeping the overflow hidden?

I have developed a collapsible toolbar that features a bootstrap dropdown element. The challenge I am facing is maintaining a fixed height for the toolbar while ensuring that any content exceeding this height is hidden, with the exception of popups. To add ...

javascripthtmltwitter-bootstrapbootstrap-4

What is the importance of setting up openTelemetry before any other code runs?

If you're using the OpenTelemetry SDK for Node.js, it's important to set up tracing before running any other code. This can be found in detail in the official documentation. However, I tried to ignore this recommendation and noticed that no trace ...

javascriptnode.jsopen-telemetry

What is the best way to use ReactJS to remove the last 3 characters from a selected text?

How can I display text on a webpage while cutting off the last 3 characters? For example, Python%22 should be displayed as Python I attempted to use substring() but it doesn't seem to be working correctly. Any help would be greatly appreciated! rende ...

javascriptreactjsxhtml

Struggling to pinpoint the exact element in Python/Selenium

As I work on creating a website manipulation script to automate the process of email mailbox creation on our hosted provider, I find myself navigating new territory in Python and web scripting. If something seems off or subpar in my script, it's beca ...

javascriptpythonjqueryselenium

Navigation and Cart Menu Issue: Inability to Expand or Collapse

The website I am currently working on is . I'm facing an issue where the cart menu expands but cannot collapse and the navigation menu does not expand when I resize the window for mobile view. Everything works fine in the normal view of the window. Ho ...

javascriptjquerymagentodebugging

Replace the function if it is specified in the object, otherwise use the default functionality

Having a calendar widget written in TypeScript, I am able to bind a listener to a separate function. However, I desire this separate function to have default functionality until someone overrides it in the config object passed to the constructor. Within th ...

javascripttypescript

Accessing Properties in React.js: A Guide

<Element id="1" onClick={this.runFunction(???)}/> When the onClick event is triggered, I want to execute a different function with the key value "1" as an argument. How can I make this happen? Thank you. ...

javascriptreactjs

The process of returning parameters from a modal view in Ionic

I am currently facing an issue with my modal view that is used for user login. I need to retrieve the user id from the modal and pass it back to the view behind. I attempted using $state.go but it was unsuccessful. Additionally, using ng-href would not wor ...

javascriptangularjsionic-framework