Dynamic URL behavior in AngularJS

Let's say I have 3 links displayed on my webpage: A B C,

When the user clicks on link A, it should trigger a function like this:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("some.url/A")
  .then(function(response) {
    $scope.myWelcome = response.data;
  });
});

How can I make link "A" dynamically reach the corresponding URL using AngularJS?

Answer №1

give this a shot

let application = angular.module('myApp', []);
application.controller('myCtrl', function($scope, $http) {
  $scope.myFunction = function(url) {
      console.log(url);
      $http.get("some.url/"+url)
      .then(function(response) {
          $scope.myMessage = response.data;
      });
  };
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<body ng-app="myApp">
    <div ng-controller="myCtrl">
        <button ng-click="myFunction('A')">A</button>
        <button ng-click="myFunction('B')">B</button>
        <button ng-click="myFunction('C')">C</button>
    </div>
</body>

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

Navigating the NextJS App Directory: Tips for Sending Middleware Data to a page.tsx File

These are the repositories linked to this question. Client - https://github.com/Phillip-England/plank-steady Server - https://github.com/Phillip-England/squid-tank Firstly, thank you for taking the time. Your help is much appreciated. Here's what I ...

Retrieve a form (for verification purposes) from a separate AngularJS component

I'm facing an issue with accessing a form from one component to another in my project. One component contains a form, and the other has navigation buttons that, when clicked, should validate the form before moving on to the next step. However, I alway ...

Ways to generate data following the integration of Firebase Firestore in Vue.JS

How can I display the orders data retrieved from Firebase in my browser console? See the image link below for reference. https://i.sstatic.net/HPlaC.png This is the code snippet for fetching data from Firebase and displaying it in the console: orders(){ ...

Updating items within an array in a MongoDB collection

I am facing a challenge where I have to pass an array of objects along with their IDs from the client-side code using JSON to an API endpoint handled by ExpressJS. My next task is to update existing database records with all the fields from these objects. ...

Why is the text not displaying in ReactJS when using Enzyme?

Can you please assist me in understanding why my test case is not running in React when using enzyme? I have installed enzyme js and followed this tutorial at Below is the code I am using: import React from 'react'; import Hello from './ ...

struggling to send JSON data to PHP using AJAX

Here is the code snippet I am currently using. Javascript <script type="text/javascript"> var items = new Object(); items[0] = {'id':'0','value':'no','type':'img','filenam ...

Problem: Both select lists are moving all items

The code below pertains to a dual select list, as depicted in the image at this link: https://i.sstatic.net/edd21.png It is functioning as intended. The only issue is that when I click on the last subject in the right-hand side list box (select Subject l ...

Is it possible to adjust table rows to match the height of the tallest row in the table?

I've been attempting to ensure that all table rows have the same height as the tallest element, without using a fixed value. Setting the height to auto results in each row having different heights, and specifying a fixed value is not ideal because the ...

javascript game for reversing an array

in case(po==true){ snake_array.reverse(); var i=0; var c=snake_array[i]; //drawing the head draw_head(c.x,c.y); for(i=1;i<snake_array.length;i++){ //drawing the body var c=snake_arr ...

Refresh and retry with Restangular after saving

I'm currently developing a Single Page Application (SPA) that primarily operates online but also has the capability to function offline. In order to maintain a record of all API requests made, I need to log them accordingly. Additionally, if certain r ...

Grabbing nested JSON Array data using Node.js

As a beginner in Node.js, I’m attempting to extract data from the JSON below: var data1 = { "_id":"R1::table::A1::order::167::comanda::2", "_rev":"1-ed6df32d3b4df9cc8019e38d655a86f5", "comanda":[ [ { ...

Clicking on the checkbox will trigger an AJAX request to cache the

Encountering a problem with an old system I am currently updating: In the <div id='list'>, there is a checkbox list. Upon clicking a checkbox, it triggers an ajax request that returns JavaScript to execute. The JavaScript in the Ajax requ ...

Guide on how to showcase the initial item from the model class using services and controller in AngularJS

Within my model Class Doctor, there exists a WebApi controller. I have organized three scripts as follows: module.js, service.js, and HomeController.js. I am seeking guidance on how to display only the first item from the model class without repeating dat ...

How to retrieve the value instead of the key/ID in a Laravel controller?

I am extracting data from the database and displaying it on the invoice view page using the json_encode($items); function. When I try to insert the 'price' field into the database, only the id/key is being stored instead of the actual value. Any ...

Sharing State with a Secure Route in Vue Router (using the script setup method)

Hello everyone, I'm encountering an issue while trying to send a state to the protected routes in vue-router. The error that I faced mentioned "Discarded invalid param(s) "_id", "dish_name", "description", "img" ...

What is the best way to align a <div> element below another without being on the same line?

I'm currently working on developing a snake game. My focus right now is figuring out how to make the body parts of the snake follow the head and be positioned after it. <!--Player--> <div class="snake"></div> So here we have the sn ...

Receiving an error when attempting to utilize a value from the .env file in createSecretKey function

Currently, my code looks like this: const secretKey = crypto.createSecretKey( Buffer.from(process.env.SECRET, "hex") ); However, I am encountering the following error message: "The value of 'key.byteLength' is out of range. It must be > ...

Is there a way to update a JSON file using React?

I'm looking for a solution to update a JSON file in React. Is it possible? Below is the code snippet that executes when an HTML element is clicked. Ultimately, it invokes VoteTracking, the function responsible for updating the JSON file. handleC ...

How to flip the value in v-model using VueJS

Below is the code snippet that I am working with: <input v-model="comb.inactive" type="checkbox" @click="setInactive(comb.id_base_product_combination)" > I am looking to apply the opposite value of comb.inactive to the v-model. Here are m ...

Ways to host static content in ExpressJS for specific directories and exclude others

I need to configure my ExpressJS server to serve static files from specific paths only, excluding others. For example, I want to serve static files from all paths except /files where I only need to manipulate a file on the server. Currently, my code looks ...