What is the best way to share data between Angular controllers using a localhost API connection?

When a button on my tr is clicked, I want to transfer the data within that tr to the next ng-controller. I've searched for a solution but it seems like I need to create an angular.module and connect the controllers together. Would it work with a localhost link instead? I'm completely stuck, any advice would be appreciated. Thank you in advance.

<div ng-controller="customersController">

    <table>
        <tr ng-click=getId(order) ng-repeat="x in Id">
            <td>{{ x.firstname }}</td>
            <td>{{ x.lastname}}</td>
        </tr>
    </table>

</div>

<div ng-controller="showInfo">

    <p>id:{{ x.firstname}}</p>
    <p>name:{{ x.lastname}}</p>


</div>

this is my script

     function customersController($scope, $http) {    


      $scope.getId= function (order) {



        };

        $http.get("localhostlink")
            .success(function (response) {
                $scope.Id = response;});
     }

Answer №1

If you want to utilize the same controller, follow these steps :

<div ng-controller="customersController"> 
   <div>

        <table>
            <tr ng-click=getid(x) ng-repeat="x in Id">
                <td>{{ x.firstname }}</td>
                <td>{{ x.lastname}}</td>
            </tr>
        </table>

    </div>

    <div>

        <p>id:{{ currentSelection.firstname}}</p>
        <p>name:{{ currentSelection.lastname}}</p>


    </div>
</div>

Include this script :

function customersController($scope, $http) {    

   $scope.currentSelection = {};

   $scope.getid= function (order) {

      $scope.currentSelection.firstname = order.firstname;
      $scope.currentSelection.lastname = ordername;  

   };

    $http.get("localhostlink").success(function (response) {
            $scope.Id = response;});
    }
}

Answer №2

To establish communication between controllers, it is recommended to utilize AngularJS services and $rootScope. These can be injected into all the controllers that require inter-controller communication.

Check out this example for reference: http://jsfiddle.net/simpulton/XqDxG/

myModule.factory('mySharedService', function($rootScope) {
    var sharedService = {};
    
    sharedService.message = '';

    sharedService.prepForBroadcast = function(msg) {
        this.message = msg;
        this.broadcastItem();
    };

    sharedService.broadcastItem = function() {
        $rootScope.$broadcast('handleBroadcast');
    };

    return sharedService;
});

Credit:

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

The button click event is failing to trigger the jQuery script

Attempting to retrieve selected data from a table using Bootstrap and jQuery. After selecting checkboxes and clicking the "Add to Cart" button, I need to get the chosen data from the table. Here is a snippet of my code: <!DOCTYPE html PUBLIC "-//W3C ...

WebDriver integration with the AngularJS form

In the HTML code, there is a file upload form with the data type input[type="text" i]. I am trying to select and upload a file without using the Robot class or KeyEvent. The class in the HTML looks like this: class="form-control ng-pristine ng-invalid ng-t ...

What is the method for accessing the $locationProvider in order to configure it?

How can I properly retrieve the configuration parameters of $locationProvider from a service or controller? When attempting simple dependency injection with function ($locationProvider), I encounter the error: Unknown Provider: $locationProviderProvider ...

Exploring the Function Scope within ViewModel

I have been facing an issue while trying to call a function from my ViewModel within a foreach loop. It seems like the function goes out of scope as soon as I call it. Being new to JavaScript, I am struggling to understand why this is happening. Here is t ...

Use a for loop to fill an array with values and then showcase its contents

I have been trying to figure out how to populate an array and display it immediately when targeting the route in my NodeJS project. Currently, I am able to console log a list of objects. However, I want to populate an array and show it when accessing loca ...

Synching the Angular controller with the view

I am having difficulty connecting the angular controller 'pointofsaleController' to a view (index.cshtml). Can someone assist me in identifying my mistake? This is in an MVC project created using visual studio. pointofsaleController.js (func ...

Retrieve the dimensions of an image once rendering is complete, using Angular

I'm currently working on obtaining the rendered size of an image within a component. By utilizing the (load) event, I can capture the size of the image as it appears at that particular moment (pic1), as well as its "final" size after the page has fini ...

The scrollbar on the side of my page seems to be malfunctioning

I'm having an issue with the collapsible sidebar and tabs on my angularjs page. The scroll bar is not appearing when there is overflow in the sidebar. I've tried setting the scrollbar height to auto and overflow-y to scroll, but it's not wor ...

Working with DOM Element Selections in AngularJS

After spending a day searching for ways to perform DOM selection in AngularJs, I came across the following code snippet: var elem = angular.element(document.querySelector("#myDiv")); elem.removeClass("selected"); I'm still unsure if AngularJs of ...

Adding JSON data to an array with a click - a step-by-step guide

As I dive into working with React and integrating API JSON data into my project, I've encountered a small hurdle. I've implemented a function that allows users to enter a search query, resulting in a list of devices associated with their input be ...

Sending JavaScript objects from React.js to Node.js

I send the object to the backend (Node js) when making an API call, but I am logging the objects for verification. Initially, I used POSTMAN to check and it worked perfectly. However, when attempting to pass an object in the frontend (Reactjs), it appear ...

Displaying Various Items Based on the Language Selected in the Google Translate Widget

Currently, I am in the process of developing a website complete with a shopping cart that will feature different products based on the country of the customer. The client has requested the use of Google Translate to allow for language changes. To accommod ...

What is the method to instruct web pack to utilize an external JavaScript file URL without causing it to become stuck in the bundle

Let's tackle a simple task: I'm interested in developing a Google Chromecast receiver app (SPA). The Google Chromecast SDK (cast SDK) mandates that their framework is hosted on an external URL and creates a global cast object. What would be the ...

Utilize Angular 8 to dynamically populate Input values with data pulled from an API

I need help with setting the input value dynamically using data from my API. Once I click send, I want it to be saved in the database. However, I am struggling to dynamically populate the input field. Can someone guide me on the right approach to achieve t ...

AngularJS - Finding the Maximum Value in JSON Data

A JSON file contains numerical values in a list: { "Entries": { "Records" : [ { "Name": "Mr Happy", "Gender": "Male", "Balance": "100" }, { "Na ...

Accessing elements in a JSON object was straightforward with the

I need help with accessing values from a JSON object based on a key name stored in a variable. My colleague has written a function to extract keys from the JSON object and compare them with the ones we are interested in. However, I am struggling with fig ...

What is the best way to utilize ajax for submitting and fetching content?

It's pretty obvious that I'm a complete novice when it comes to JavaScript and jQuery, but I have a query regarding ajax requests. Here's what I'm trying to achieve but struggling with: I've defined a content.append('<di ...

Is there a way to load a URL within a DIV element using AJAX?

These two PHP files are set up to capture a user's input from a form and then display that text. Below you'll find the code for each file: file1.php: <form action="output.php" method="post"> Paste text document: <br> ...

Unlocking the attributes of Angular form elements: A guide

Imagine we have a form like this <form name="myForm" data-ng-controller="Ctrl"> <input name="input" data-ng-model="userType" data-description="User Type" required> </form> When working in the controller, we can refer to the input el ...

Using AngularJs to implement a $watch feature that enables two-way binding

I am in the process of designing a webpage that includes multiple range sliders that interact with each other based on their settings. Currently, I have a watch function set up that allows this interaction to occur one way. However, I am interested in havi ...